mkimq

文本控制

字体设置

可以定义多个字体，系统会依次查找，比如 'Courier New' 字体不存在将使用 Courier 以此类推。

font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';

自定义字体

警告

一般不使用自定义字体，除非项目需要或则引入字体图标。

可以声明自定义字段，如果客户端不存在将下载该字体，使用方式也是通过 font-family 引入。

<style>
    @font-face {
        font-family: "mkimq";
        src: url("SourceHanSansSC-Light.otf") format("opentype"), url("SourceHanSansSC-Heavy.otf") format("opentype");
    }

    span {
        font-family: 'mkimq';
    }
</style>

字重定义

字重指字的粗细定义。取值范围[normal | bold | bolder | lighter | 100 ~900]。

400对应 normal，700对应 bold，一般情况下使用bold或normal较多。

字体字号

字号用于控制字符的显示大小，包括[xx-small | x-small | small | meidum | large | x-large | xx-large]。

  1. 百分比

百分数是子元素相对于父元素的大小，如父元素是20px，子元素设置为 200%即为你元素的两倍大小。

  1. em

em单位等同于百分数单位。

  1. rem

rem相当于根字体大小百分比。

字体颜色

  1. 字符颜色：red、green等字符颜色声明

  2. 十六进制网页颜色

  3. rgb/rgba

行高

div {
    line-height: 20px;
}

倾斜风格

span {
    font-style: italic;
}

em {
    font-style: normal;
}

组合定义

可以使用 font 一次将字符样式定义，但要注意必须存在以下几点：

  1. 必须有字体规则
  2. 必须有字符大小规则
span {
	font: bold italic 30px/1.5 'PingFang SC', arial, sans-serif;
}

上例中的30px为字体大小，1.5为1.5倍行高定义

文本样式

大小转换

  1. 小型大写字母字体
span {
	font-variant: small-caps;
}
  1. 字母大小写转换
h2 {
    /* 首字母大小 */
    text-transform: capitalize;

    /* 全部大小 */
    text-transform: uppercase;

    /* 全部小写 */
    text-transform: lowercase;
}

文本线条

a {
	text-decoration: none;
}

span.underline {
	text-decoration: underline;
}

span.through {
	text-decoration: line-through;
}

span.overline {
	text-decoration: overline;
}

<a href="">mkimq.com</a>
<hr>
<span class="underline">下划线</span>
<hr>
<span class="through">删除线</span>
<hr>
<span class="overline">上划线</span>

阴影控制

参数顺序为：颜色，水平偏移，垂直偏移，模糊度。

h2 {
    text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;
}

空白处理

使用 white-space 控制文本空白显示。

选项说明
pre保留文本中的所有空白，类似使用 pre 标签
nowrap禁止文本换行
pre-wrap保留空白，保留换行符
pre-line空白合并，保留换行符

文本溢出

  1. 单行文本

溢出文本容器后换行处理

h2 {
    overflow-wrap: break-word;
    width: 100px;
}

溢出内容末尾添加 ...

div {
    width: 200px;
    border: solid 1px blueviolet;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
  1. 多行文本
div{
    width: 200px;
    border:solid 1px blueviolet;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
  1. 表格文本溢出

表格文本溢出控制需要为 table 标签定义 table-layout: fixed; css样式，表示列宽是由表格和单元格宽度定义。

table {
    table-layout: fixed;
}

table tbody tr td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

段落控制

文本缩进

控制元素部的文本、图片进行缩进操作

p {
    text-indent: 2em;
}

水平对齐

使用[left | right | center]对文本进行对齐操作

h2 {
	text-align: center;
}

垂直对齐

使用vertical-align用于定义内容的垂直对齐风格，包括[middle | baseline | sub | super]等。

  1. 图像在段落中居中对齐
img {
	height: 50px;
	width: 50px;
	vertical-align: middle;
}

<p>
    <img src="mkimq.jpg">
    文本信息。
</p>
  1. 顶部与底部对齐

[bottom | top]相对于行框底部或顶部对齐。

span {
	vertical-align: bottom;
	font-size: 12px;
}
  1. 使用单位对齐
span {
	vertical-align: -20px;
	font-size: 12px;
}

字符间隔

  1. 单词与字符间距

使用word-spacing与letter-spacing控制单词与字符间距。

h2 {
	word-spacing: 2em;
	letter-spacing: 3em;
}

排版模式

模式说明
horizontal-tb水平方向自上而下的书写方式
vertical-rl垂直方向自右而左的书写方式
vertical-lr垂直方向内内容从上到下，水平方向从左到右
贡献者: mankueng