网页字体美化自定义font-face字体库大小优化

网页都知道可以自定义字体，有些需要突出设计感的网页，不一样的字体是必不可少的。对于css3而言这也是个容易实现的功能，通过@font-face 属性即可自定义字体，然后直接使用font-family使用。

/*自定义字体类型*/

@font-face {  font-family: "newname";  src:url("字体文件URL"); }

/*使用*/

body{  font-family: "newname";}

英文的字体还好说，一共也就二十六个字母，大小写全加上52个字母的设计，其字体库文件大不了哪去，可中文的字体库文件就不一样，少说常用中文字达上千，如果想要得到统一的视觉效果，这一千个字的字体就要重新设计，那么这样的字体库文件就会比较大，例如思源黑体的字体文件就有10.3M啦（window下的TTF）。

倘如再网页中用了思源黑体的字体设计网页，加载整个字体库文件显然会比较吃力，想象一下等待一个10m的文件下载，网页浏览者早就离开了。

对于一些网页设计而言，一些网页文字的设计又是必不可免的，那该怎么处理网页字体呢？

分两种情况来讲，一种是需要设计字体的文字是可控的，少量的；另一种是不可控的，比如新闻页都需要设计字体。

 先说第一种，文字字数可控

这类比较常见是各种栏目标题，或者是单页里少数地方用到了设计的字体，这样的文字从个数和具体是哪些文字都是可以知道的，这样只需要从一个字体库文件里，把需要用到的字体提取出来，组成一个小字体库。

能够完成这一步，只需要一个工具-Fontmin，可以直接可视化实现提取字体库中文字生成一个小字体库。

可直接进去下载 http://ecomfe.github.io/fontmin/#app/

使用也很简单，先将整个字体文件拖到左下方框框，再将具体需要到的文字复制在左方的大框框里，最后点击生成即可，这样生成一个小的字体库文件，就可以@font-face引入作为自定义字体使用。

 第二种，字数无法控制

这类就是全局使用了设计字体，在网站的新闻页也使用了，你不能确定新闻会出现哪个文字，所以为了显示的统一，字体库只能是全体常用文字（也就是10m那般大小的字体库）。

对于这类的优化方案只能是尽量减少加载字体文件，或者减轻字体文件大小。

减少加载的原理是如果浏览者电脑里本身就有该字体，则不下载，这就需要了解@font-face里src里的local，可以加载客户端的字体，前提是知道其字体名称。

而减少字体文件大小，是转换字体文件的格式，这就跟一般情况下jpg的图片会比png的小原理一样。

对于比较新的字体格式woff2/woff会比otf/ttf格式的文件小。举个例子，还是上面的思源字体，转化为woff2为4.73m，而woff为6.67m,对比10.3m的ttf也是减少了不少。

woff(woff2)是针对web的字体格式，各浏览器支持程度不一，woff2比woff压缩更好但是要求浏览器版本更高，具体支持浏览器版本可以自行百度。一句话，优先用woff2，其次woff，都不支持用otf(ttf)。

如果只有TTF文件怎么转换成woff(woff2)文件呢？只需一个网站，操作很简单，选择从什么格式转换为什么格式，等待完成下载即可。

在线转换即可。https://cloudconvert.com/

 网页实际开发中应用

当网站全站使用了某一种字体时，应该怎么处理呢？在实际种这种情况虽然比较少，但是仍不可完全避免，本人就在做网页时遇到，这种情况为了减少字体库文件。我的办法是，先去下载一个常用字库，大概3500个左右，github上个收集好了的

https://github.com/elephantnose/characters

下载下来得到一个TXT文件，然后在这个TXT文件里加上26个大小字母和0-9数字，这样基本上涵盖了会用到的文字，字母，数字；将其全部复制到Fontmin软件里，提取小的字库文件，这样就达到了减少字库文件的目的。

ps:如果后期在更新网站发现有文字先生异常，没有正确使用到字体，那么可以将这些字追加到TXT文件里，重复 复制-粘贴到Fontmin里去提取文字库；fontmin得到的文件没有woff2格式，如果觉得还不满意，可以再去上文提到的转换网站，在线转化为woff2格式。

 总结

对于网页字体，如果文字可控，用fontmin缩小字体库，文字不可控，转换格式，自定义字体时优先加载客户端字体，客户端没有加载顺序woff2-woff-otf，css代码可以参考下方：

@font-face {

font-family: "wow"; /*自定义名字*/

src: local("SOURCEHANSANSCN-LIGHT"), /* 优先local 加载本地*/ local("SOURCEHANSANSCN"),

url("SourceHanSansCN-Light.woff2") format("woff2"),  /* 优先 加载woff2*/ url("SourceHanSansCN-Light.woff") format("woff"),

url("SOURCEHANSANSCN-LIGHT.OTF");

}

本文地址：https://www.ydqic.com/4111.html