element 如何自定义svg图标_自定义字体@fontface的常见应用

前言

@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: ; /* 哪些字符需要使用这个字体 */    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是一只蓝色小鸟，查看这个小鸟源码，发现这个元素使用一个空的标签。该标签中有一个::before伪元素，内容是"/f179"，字体名是"edgeicons"。我们找到页面资源，下载这个字体，用字体编辑软件打开，找到unicode编码为f179的字形：

可以看到，这个字形就是该网站的LOGO，因此页面中的这个字就会显示成LOGO的形状。使用字体绘制图标不仅比图片要更小，减少请求次数，还可以通过font-size矢量缩放大小，通过color设置图标颜色，使用起来也是非常便捷。

在线制作的字形图标的工具，国外用户推荐fontello，国内用户推荐iconfont。

反爬虫抓取

第一次听到字体竟然可以用于反爬虫，谁都会大吃一惊。先看例子：

某骆驼订票网站，页面上价格明明就是1590，查看源码怎么就变成1580了？继续查css，发现此处使用@font-face引入一个自定义字体如下：

原来，狡猾的工程师把自定义字体中的字符“8”，形状绘制成“9”的形状。这样页面中用到这个字体的所有8，都会显示为9。注意这里字体每次都会动态生成，并配合生成页面内容，使得用户页面上看到的形状都是“1590”，从而理解到正确的价格。而蠢萌的爬虫抓取到的内容，则是错误的1580。

在许多竞争激烈的行业，价格这种敏感数据，不能轻易被友商的爬虫抓取。不过所谓道高一尺、魔高一丈，某猫电影票也使用这种反爬虫策略，但网上已经出现了对页面截图、并进行图象识别的python脚本。

其他脑洞

受限于公众号不能直接修改网页源码， 有些效果展示不了。有兴趣的朋友可以点击原文链接，跳转到我博客上的原文，了解一下自定义字体的其他应用。