关于手机端网页引入字体文件过大问题

问题描述:

  • 安卓手机中文字体匮乏,需要通过@font-face网络引入。
  • 可是中文字体动不动就10M起步。页面加载完后,还不见字体加载进来,总是过了好一会字体才姗姗来迟变成想要的字体。这无疑不是我们想要。
  • 鉴于我只是想给某几个单独的字设置字体(比如本博客的title:墨水儿),我能想到的一个行之有效的方法就是给字体文件瘦瘦身,删除没有必要用不着的字体。 总结以下,我的解题思路是,从字体库里挑出「墨水儿」三个字的,单独做成一个字体文件。

操作步骤:

第一步:使用编辑器打开待处理的字体文件

这里我们使用的字体编辑神器百度字体编辑器

upload successful

这是文件打开后的效果:
打开的效果

第二步:跳出我们需要的汉字

需要在原始字体库里找到我们需要保留的「墨水儿」三个字,百度字体编辑器提供了三种查找方式,我们选择代码点查找,实际上就是根据汉字的unicode进行查找。我们以「墨」字为例。
首先我们通过Unicode查询网站获取「墨」字的Unicode,16位的Unicode为58A8
upload successful

接着,通过unicode(即代码点)查找「墨」字
upload successful

第三步:再打开一个字体编辑网页

新建一个字体文件:
upload successful

第四步:将原始文件中挑出的汉字复制进新字体文件中

复制查找出的文字
upload successful

很贴心的是,这个web工具是可以跨浏览器标签复制粘贴的。
打开第三步新建了字体文件的网页标签,点击❐粘贴,将「墨」字粘贴进新字体文件

注意,不要覆盖第一个方格

upload successful

如法炮制,将其余两个字也添加过来

第五步:将挑选出来的汉字另存为新的字体文件

upload successful

导出的字体文件已然从10M的糙老汉变成2Kb的小可爱啦。

第六步:在Css通过@font-face引入字体

1
2
3
4
5
6
@font-face
font-family fzyt
src url(../../fonts/FZYTK.TTF)

.site-title
font 20px/36px "方正姚体",serif,fzyt

至此为止,一个让人头疼的前端小问题完美解决。

总结

关于@font-face,更多的应用场景是用来生成自定义字符小图标。而用来引入网络字体会导致极大的性能损失和网络压力,可以说得不偿失,所以还需要谨慎选用使用场景。


Js解决方案

又在网上看到了一个解决方案,利用字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

原文

话说这年头真是啥插件都有啊。。。