前言
如何使用网页设计指定的字体,要知道在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,可以考虑安装。