前言
如何使用网页设计指定的字体，要知道在windows系统里是没有苹方字体的，用户没有安装怎么办，我们如何安装字体，字体文件过大怎么办，怎样处理这些问题了？
一、有哪些字体文件可以使用？
-
TrueType (.ttf)（最常用的）
-
EOT – Embedded Open Type (.eot)
-
OpenType (.otf)
-
WOFF – Web Open Font Format (.woff)
-
SVG (Scalable Vector Graphics) Fonts (.svg)
二、在网页中如何使用？
/* 字体文件引入及声明 */
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
/*指定字体*/
div {
font-family:myFirstFont;
}
三、怎么压缩字体文件？
- 使用node处理，安装
font-spider,在命令行使用npm i font-spider -g全局安装font-spider - 新建一个html文件，引入字体文件，声明并使用字体，我们需要使用什么字，就在页面中一一列举并使用。压缩后的字体文件，就仅包含规定的文字，从而去掉不使用的字体，减小体积
<!DOCTYPE html>
<html lang="en">
<body>
<style>
/*声明 WebFont*/
@font-face {
font-family: "pinghei";
src: url("./STSongtiSCBlack.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.font-pinghei {
font-family: "pinghei";
}
</style>
<pre>
<code class="font-pinghei">
QWERTYUIOPLKJHGFDSAZXCVBNM
qwertyuioplkjhgfdsazxcvbnm
0123456789
</code>
</pre>
</body>
</html>
- 在html文件目录使用命令行，使用命令
font-spider index.html，开始压缩字体文件，准确说是提取需要的字体
总结
在网页中一些banner部分的特殊字体，价格会使用的不一样的字体，但往往又不要使用整个字体文件，这个时候就需要我们进行压缩文件。一般情况不需要单独安装字体，常用汉字有3500个，加上繁体更多，一整套字体文件少说也说10mb左右，不像英文26个字母加10个数字就搞定了，太大的字体文件直接会让网页打开巨慢，得不偿失，一般页面中规定好字体就可以了，用户有没有安装随缘了。像是桌面应用或是app，可以考虑安装。