绝大多数情况下,我们在网页开发中都要使用 Web 安全字体,高傲的设计师肯定不局限于安全字体。
那么问题来了:我们如何保证客户端对字体的显示一致性,本文对此进行深入探讨。
我们从头说起,设计师要求使用苹方字体,可是这并不是一个web安全字体。
这意味着,如果客户端没有该字体库,那么我们的用户将看到一些默认字体,这违背了我们最初“显示一致性”的美好愿景。
怎么办,关于这个问题,我做出了以下尝试。
一、查找方案
不是什么大问题,先搜索一下,很快我查到了某中文字库,大致用法如下:
嵌入如下js代码片段:
效果是达到了,可是当看到要收费的时候,我已经不爱你了。第三方的方案还要收费,显然并不完美。
那怎么办,一定还有其他方案,我们继续搜索。
二、下载字体
找个免费的试试?好吧,去下载苹方字体,我自己引入字体包。
历尽千辛万苦,总算找到了一个苹方字体库。下载之后发现文件后缀是 ttf,浏览器中加载不出来。。。
可以从css的使用方式中看出端倪:
于是乎,我又想着有没有一个在线工具可以将 ttf 转化成 woff,那这样问题就迎刃而解了。
三、字体转换
找了一圈,大致问题如下:
1.文件太大的不能转换(下载到的苹方 ttf 为 11M );
2.只支持英文转换,中文的字体不能转换;
3.可以转换,但需要付费下载的;
四、终级解决方案
真是太失望了,不就是想转换一下字体吗,没一个靠谱的。那我自己来搞,是时候展现真正的技术了~
大致思路如下,这里我借助了开源项目 fontmin(传送门):
1.加载fontmin;
2.指定转换文件,并指定输出目录,如果没有则创建;
3.转换为eot、woff以及svg格式输出;
4.svg格式文件较大,借助imagemin(传送门)对其进行压缩处理,之后输出;
五、快速开始
我们创建 index.js,如下:
代码很简单,大概过一下:
1.我们选择要处理的字体:PingFang-Light.ttf
2.将 ttf 转换成 eot 格式;
3.将 ttf 转换成 woff 格式;
4.将 tff 转换成 svg 格式;
5.由于 svg 文件较大,通过 svgo 进行优化输出;
6.异常捕获处理;
Demo 地址:
https://github.com/chenfengyanyu/web-font-convert
到这里,我觉得还有瑕疵。ttf 大小为 11M,转换的 woff 大小为 7M 左右,那么我们网页引用,会不会加载不起来呢?
那如果我们追求极致的体验呢,如何对字体压缩?也就是精简字体包,那该如何操作?
六、字体精简与压缩
关于字体压缩,我找到了这个:
字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。
我们先来安装:
找到 html 文件目录,运行:
注意:字蛛会分析页面使用的 webfont,也就意味着他只抓取静态页面的 font
七、总结
到这里,我们总算达到了目的,成功将苹方字体转换成了 Web 安全字体。回顾一下过程:
1.首先下载你需要的字体文件,一般会是 ttf 格式;
2.将 ttf 文件转换成 eot,woff,svg 等 web 支持字体;
3.压缩精简字体,达到优化加载目的;
是不是很简单,通过转换,理论上,你可以使用任何字体哦~
1.
2.
3.
閱讀更多 F2EAwesome 的文章