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:字母间隔修改的是字符或字母之间的间隔