文本

# 综合

# line-height

line-height: <行高> 继承

• normal：常规 默认值（谷歌浏览器为字号的1.32倍，火狐浏览器为字号的1.44倍）
• 长度值
• 百分值：相对于字号
• 数值：字号的倍数

# vertical-align

vertical-align: <纵向对齐>

• baseline：基线对齐 默认值
• sub：下标，即元素基线低于父元素基线
• super：上标，即元素基线高于父元素基线
• bottom：行内框底部与行框底部对齐
• top：行内框顶部与行框顶部对齐
• text-bottom：行内框底部与父元素内容区底部偏下对齐
• text-top：行内框顶部与父元素内容区顶部偏上对齐
• middle：行内框中线与父元素基线偏上对齐
• 长度值：基线偏离上或下的距离
• 百分值：基线偏离上或下的距离，相对于 line-height

# letter-spacing

letter-spacing: <字符间距> 继承

• normal：默认字符间距 默认值
• 长度值：对默认字符间距增加或减少的量

# word-spacing

word-spacing: <单词间距> 继承

• normal：默认单词间距 默认值
• 长度值：对默认单词间距增加或减少的量

# white-space

white-space: <空白处理> 继承

• normal：空白符压缩，换行符压缩，内容换行 默认值
• nowrap：空白符压缩，换行符压缩，内容不换行
• pre：空白符保留，换行符换行，内容不换行
• pre-line：空白符压缩，换行符换行，内容换行
• pre-wrap：空白符保留，换行符换行，内容换行

# word-break

word-break: <换行方式> 继承

• keep-all：空格，连字符允许换行
• normal：单词之间，空格，连字符允许换行 默认值
• break-all：单词内部，单词之间，空格，连字符允许换行
• break-word：连续相连符号内部，单词内部，单词之间，空格，连字符允许换行（即任意处都可以换行，不会出现溢出）

# overflow-wrap

overflow-wrap: <溢出处理> 继承

• normal：溢出处不换行 默认值
• break-word：溢出处换行

# tab-size

tab-size: <制表符宽度> 继承

• 数值：空格的个数，8 默认值
• 长度值

# direction

direction: <文本方向> 继承

• ltr：从左到右 默认值
• rtl：从右到左

# writing-mode

writing-mode: <书写模式> 继承

• horizontal-tb：行内方向从左到右，块级方向从上到下 默认值
• vertical-lr：行内方向从上到下，块级方向从左到右
• vertical-rl：行内方向从上到下，块级方向从右到左

# hyphens

hyphens: <连字符> 继承

• manual：单词换行时，优先在 ­ 处加连字符并换行 默认值
• auto：自动加连字符
• none：忽略连字符

# 字体

# font-family

font-family: <字族>,# 继承

• serif：衬线字体（字形宽度各异，有衬线）
• sans-serif：无衬线字体（字形宽度各异，无衬线）
• monospace： 等宽字体（字形宽度相同）
• cursive ：草书字体（手写体）
• 字体名，如 Microsoft YaHei，"Microsoft YaHei"

CSS字体font-family的正确选择方案open in new window

# font-size

font-size: <字号> 继承

绝对大小

• xx-small，x-small，small，medium 默认值，large，x-large，xx-large

相对大小

• smaller，large

其他

• 长度值

• 百分值：相对于父元素字号

# font-weight

font-weight: <字重> 继承

一级字重

• 100，200，300

二级字重

• 400 | normal 默认值 ，500

三级字重

• 600，700 | bold，800 ， 900

相对字重

• bolder，lighter

/* 定义多个相同字族，对应不同字重属性和字体文件 */
@font-face {
    font-family: "MyFont";
    font-weight: 300;
    src: url(../font/msyhl.ttc);
}
@font-face {
    font-family: "MyFont";
    font-weight: 400;
    src: url(../font/msyh.ttc);
}
@font-face {
    font-family: "MyFont";
    font-weight: 700;
    src: url(../font/msyhbd.ttc);
}
/* 通过字重属性确定应用的字体文件 */
.div {
    font-family: MyFont;
    font-weight: normal;
    font-size: 50px;
}

常见字型字重对应表

相对字重表

# font-style

font-style: <字形> 继承

• normal：常规 默认值
• italic：斜体
• oblique：倾斜体

# font-variant

font-variant: <字体变体> 继承

• normal ：常规 默认值
• small-caps：将小写字母转成小号的大写字母

# font-stretch

font-stretch: <字宽> 继承

常规

• normal 默认值

压缩

• semi-condensed，condensed，extra-condensed，ultra-condensed

扩大

• semi-expanded，expanded，extra-expanded，ultra-expanded

# font-kerning

font-kerning: <是否使用字体中的字距信息> 继承

• auto：自动 默认值
• normal ：使用字体中的字距信息
• none：禁用字体中的字距信息

# font

font: [<font-weight> || <font-style> || <font-variant>]? <font-size> [/ <line-height>]? <font-family> 继承

# 文本

# text-indent

text-indent: <首行缩进> 继承

• 长度值
• 百分值：相对于宽度

# text-align

text-align: <文本对齐> 继承

• start：起始对齐 默认值
• end：结尾对齐
• left：左对齐
• right：右对齐
• center：居中对齐
• justify：两端对齐

# text-align-last

text-align-last: <文本尾行对齐> 继承

• auto：自动 默认值
• start：起始对齐
• end：结尾对齐
• left：左对齐
• right：右对齐
• center：居中对齐
• justify：两端对齐

# text-transform

text-transform: <文本转换> 继承

• none：无转换 默认值
• uppercase：字母转大写
• lowercase：字母转小写
• capitalize：单词首字母转大写

# text-decoration

text-decoration: <文本装饰>

• none：无装饰 默认值
• underline：下划线
• overline：上划线
• line-through：删除线

# text-shadow

text-shadow: <水平偏移距离> <垂直偏移距离> <模糊半径>? <阴影颜色>? 继承

# text-overflow

text-overflow: <文本溢出>

• clip：裁剪
• ellipsis：省略号

# text-rendering

text-rendering: <文本渲染效果> 继承

• auto：自动 默认值
• optimizeSpeed：速度优先
• optimizeLegibility：清晰性优先
• geometricPrecision：几何精度优先

# text-orientation

text-orientation: <文本方位> 继承

• mixed：英语侧排，汉语直排 默认值
• upright：英语和汉语都直排
• sideways：英语和汉语都侧排

# -webkit-text-stroke-width

-webkit-text-stroke-width: <文本描边宽度> 继承

• 长度值

# -webkit-text-stroke-color

-webkit-text-stroke-color: <文本描边颜色> 继承

• 颜色值

# -webkit-text-stroke

-webkit-text-stroke: <text-stroke-width> <text-stroke-color> 继承