Font

font-family(字体原理)

• 使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到文字时会转换成对应的 unicode码（可以认为是世界上任意一种文字的特定编号）。再根据HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上

• 在 CSS 中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码（GB2312、UTF-8 等）不匹配时会产生乱码。保险的方式是将字体名称用Unicode来表示
  宋体 | SimSun | \5B8B\4F53 黑体 | SimHei | \9ED1\4F53 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1

• 查询unicode编码：打开控制台 escape('微软雅黑')，把 %u替换成 \

字体图标的实现原理

chrome最小字体解决方案

文本

• text-align：文本对其方式 left、center、right、justify
• text-indent：文案第一行缩进距离
• text-decoration： none、underline、line-through、overline
• color：文字颜色
• text-transform：改变文字大小写none、uppercase、lowercase、capitalize
• word-spacing：可以改变字（单词）之间的标准间隔
• letter-spacing：字母间隔修改的是字符或字母之间的间隔

范例