CSS – Font / Text 属性

前言

之前学 W3Schools 时记入过一些 W3Schools 学习笔记 (1) – CSS Fonts.

由于太简单就没有另外写一篇, 现在感觉内容比较整齐了, 所以整理一篇出来.

属性

font-family

定义字体, 看这篇 CSS – Font Family

font-style

normal, italic, oblique. 绝大多数都是用 normal 的, italic 是斜体. oblique 没有用过

注: 不是所有字体都支持 italic 的哦

font-weight

字体的粗细

value = 100, 200, 300...900 (不是所有字体都有 100 到 900 哦)

100 叫 thin

200 叫 extra light

300 叫 light

400 叫 regular

500 叫 medium

600 叫 semi bold

700 叫 bold

800 叫 extra blod

900 叫 black

其它的很少冷门. 赋值最好不要用英文, 号码比较容易理解.

font-size

字体大小尺寸, 看这篇 CSS – rem, em, px

font

shorthand 来的

顺序

font-size 和 font-family 是 required 哦

text-decoration

最常用的是 underline, 做 anchor 下划线.

text-transform

最常用的是 uppercase

capitalize 不是 TitleCase 哦, 这个要注意, TitleCase 规则比较复杂, 比如 King of the Ring 中, of 和 the 都是小写的, capitalize 会写成大写.

 

text-align

调 horizontal alignment. 比如 left, start, center, right, end

有一个比较冷门的叫 text-align: justify

W3Schools 的解释是 "Stretches the lines so that each line has equal width (like in newspapers and magazines)"

用于印刷, 其效果是这样的:

变宽的就是 justify

vertical-align

调 vertical alignment, 比如 top, start, center, bottom, end

line-height

默认是 1.2 左右, 它 depend on 字体. 不同字体不同大小都有不同的 line-height ratio.

1.2 算法是 font-size 乘于 1.2

比如 16px * 1.2 = 19.2px 就是 span 的高度.

关于 line height 和 half-leading 可以看这篇.

letter-spacing

它用来调节每一个单字母的间距. 很少用到, 只有在一些 button 的地方可能会放 1px 让它阔一些.

white-space, word-break, overflow-wrap, word-wrap

看这篇 CSS – word-break, overflow-wrap, word-wrap, white-space

text-overflow

主要用来做 ellipsis, 看这篇 CSS – ellipsis and line-clamp

color

调字体颜色