自定义字体@font-face的常见应用
2018-04-27
前言
@font-face允许网页自带字体，从而消除对用户电脑字体的依赖。基本用法如下：
@font-face {
font-family: "family-name"; /* 字体名 */
src: url("family-name.eot"); /* IE9 */
src: url("family-name.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("family-name.woff") format("woff"), /* chrome、firefox */
url("family-name.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("family-name.svg#family-name") format("svg"); /* iOS 4.1- */
unicode-range: <urange>; /* 哪些字符需要使用这个字体 */
font-weight: normal; /* 字体粗细 */
font-style: normal; /* 字体样式 */
}当页面中用到这个字体，且用户设备中没有这个字体，就会从@font-face中指定的路径下载字体文件。以下几点请注意：
1.因各浏览器对字体的兼容不同，需要同时备有多种字体样式，请参考浏览器兼容情况；
2.字体文件的路径需要和网页在同一域名下，否则需要做跨域处理；
3.unicode-range设置只使用该字体的个别字符，有一定实用性，请参考文档使用；
本文列举@font-face的常见应用。
自定义字体
@font-face最原始的应用场景，就是使用用户电脑里没有的字体。举例：
某狗电商网站，使用@font-face引入方正字体。CSS中的@font-face依次配置了eto、woff、truetype、svg四种格式，格式参考上文。Chrome选择下载woff格式，其余格式不下载。文件地址来自misc.360buyimg.com域名，与页面自身域名不一致，使用Cors跨域。至此，字体已下载到用户的设备中了，可以直接在css中使用通过font-family调用。
成套的中文字体包含大量字符，文件通常都比较大，动辄几M的字体文件会拖累页面加载速度，影响用户体验。上述这个页面中，使用到方正字体的只有28个汉字，因此对字体进行了子集化的处理，精简后文件大小只有6.47K。关于字体子集化，请参考我的上一篇博客。
自定义图标
@font-face的另一个常见应用，是取代图片格式的图标，举例：
某鸟社交网站的LOGO是一只蓝色小鸟，查看这个小鸟源码，发现这个元素使用一个空的<i>标签。该标签中有一个::before伪元素，内容是"/f179"，字体名是"edgeicons"。我们找到页面资源，下载这个字体，用字体编辑软件打开，找到unicode编码为f179的字形：
可以看到，这个字形就是该网站的LOGO，因此页面中的这个字就会显示成LOGO的形状。使用字体绘制图标不仅比图片要更小，减少请求次数，还可以通过font-size矢量缩放大小，通过color设置图标颜色，使用起来也是非常便捷。
在线制作的字形图标的工具，国外用户推荐fontello，国内用户推荐iconfont。
反爬虫抓取
第一次听到字体竟然可以用于反爬虫，谁都会大吃一惊。先看例子：
某骆驼订票网站，页面上价格明明就是1590，查看源码怎么就变成1580了？继续查css，发现此处使用@font-face引入一个自定义字体如下：
原来，狡猾的工程师把自定义字体中的字符“8”，形状绘制成“9”的形状。这样页面中用到这个字体的所有8，都会显示为9。注意这里字体每次都会动态生成，并配合生成页面内容，使得用户页面上看到的形状都是“1590”，从而理解到正确的价格。而蠢萌的爬虫抓取到的内容，则是错误的1580。
在许多竞争激烈的行业，价格这种敏感数据，不能轻易被友商的爬虫抓取。不过所谓道高一尺、魔高一丈，某猫电影票也使用这种反爬虫策略，但网上已经出现了对页面截图、并进行图象识别的python脚本。
其他脑洞
你是否记得一个老梗“写作oo读作xx”。请念一下这个词：
变态
请查看网页源码，看看这个到底词是什么。或者更简便的，复制粘贴到记事本。结合本文内容，你应该很容易猜到这是怎么实现的。是不是有种打开新世界大门的感觉？
SEO有更优的手段，一般不这么折腾。但由于众所周知的原因，有些敏感词是不能在网上发布的。而通过自定义字体来“指鹿为马”，为绕开敏感词提供了一种思路。话题展开到这里，就不方便继续讲下去了。
本文未经许可禁止转载，如需转载请联系 JAY@oonne.com
