引入特殊字体

Posted 2021-09-27 bounsail

1、引入特殊字体

@font-face {
    font-family:\'specielfont\';
    src: url(\'/static/font/font.ttf\'); /*下载的字体的路径*/
    // 考虑到兼容性，需要引入四种字体文件。分别是.eot,.woff,.ttf,.svg后缀；
}

.testFont{font-family: specielfont;} /*字体的名字*/

2、压缩字体 / 提取字体
直接将字体放在服务器上引用，但是一个中文字体要好几M，这样做并不合适。找一个在线压缩字体的工具——https://www.fontke.com/tool/subfont/

上传字体，工具将ttf中的字体精减，只剩下html页面中包含的字体。这样一个网页下来，字体文件就几K，一张图片也要好几十K呢，还是非常合适的。

压缩字体：https://blog.csdn.net/weixin_30607029/article/details/99998903

步骤解析：
1、下载所需的字体后，引入字体库到项目的font文件中；
2、css引入字体文件，font-face自定义字体；
3、字体文件太大，使用字蛛font-spider，对字体文件压缩；