浏览器根据font-family解析渲染为不同图形的过程:
1:读取文字内容转换成对应的 unicode码()
计算机操作系统里面每个字符都有一个unicode编码,比如我们在web上输入\u6211跟输入“我”是一样的,因为「我」的unicode是\u6211(16进制),浏览器会自动帮你找到对应的图形去渲染。而字体文件的作用是规定某个字符应该用什么形状来显示。unicode字符集里面,E000 至 F8FF属于用户造字区。原本是空的,用户可以在字体文件里面随便定义这些字符的形状,通过项目引入加载去找到自定义字符,这就和使用操作系统的字体是一样的了。
2:根据HTML里设置的 font-family (如果没设置则使用浏览器默认设置)即去查找电脑里(如果有自定义字体@font-face ,则加载对应字体文件)对应字体的字体文件
比如:现在有个自定义图标文件(unicode一定在E000 至 F8FF范围内!),现在我手动添加一个操作系统字体“我”,如下图
图标文件库2.png
在HTML里面这样用:
浏览器效果:
浏览器效果.png
浏览器效果展示是一样的,只不过一个是从引入的文件里面去找,一个直接指定了操作系统的文字。
3:找到文件后根据 unicode 码去查找绘制外形,找到后绘制到页面上。