Firefox禁止远程字体加速网页加载及图标字体补充安装

  • Firefox禁止远程字体加速网页加载及图标字体补充安装已关闭评论
  • 100 次浏览
  • A+
所属分类:Web前端
摘要

作为程序员,日常工作中我们可能经常需要打开国内外许多不同的网站寻找教程,但是很多国外网站,特别是基于WordPress的博客,往往会使用Google字体,这是使得我们访问这些网站的时候会自动尝试加载这些字体,而严重影响打开速度。这时候我们可以考虑禁止所有的远程字体以加速访问。虽然这样会影响所有网站的字体显示,但如果本地安装了Noto系列等优秀的字体,几乎不会因此遇到常规中英文、emoji的显示问题。强制使用本地字体代替远程显然对任何相关网站都能起到加速作用。


禁止远程字体的作用

作为程序员,日常工作中我们可能经常需要打开国内外许多不同的网站寻找教程,但是很多国外网站,特别是基于WordPress的博客,往往会使用Google字体,这是使得我们访问这些网站的时候会自动尝试加载这些字体,而严重影响打开速度。这时候我们可以考虑禁止所有的远程字体以加速访问。虽然这样会影响所有网站的字体显示,但如果本地安装了Noto系列等优秀的字体,几乎不会因此遇到常规中英文、emoji的显示问题。强制使用本地字体代替远程显然对任何相关网站都能起到加速作用。

禁止远程字体的方法

  1. 在地址栏输入about:config打开配置
  2. 搜索gfx.downloadable_fonts.enabled,将其值改为false即可

这样会强制禁止网页下载远程字体,而使用本地字体代替。其他的一些相关配置,如在字体设置中取消勾选“允许网页选择字体”等,似乎只能改变字体的显示,无法起到禁用字体下载以加速的作用。

图标字体无法显示问题及解决方法

虽然绝大部分的字符可以显示,但是有一类比较特殊,就是所谓图标字体(icon font)。前端开发可能对它比较熟悉,我自己的理解就是一类特殊的Unicode字符,需要有特定的字体支撑,而往往不能用另一种图标字体来替代,在实际操作中一般假定用户没有安装相应的字体,而是通过CSS的@font-face等方式来加载远程字体文件。这样的字体在本地安装了相应的字体文件后,可以正常显示,但是如果没有安装,同时又禁止了远程字体,就会显示为方框,里面有4位十六进制的编码。下面,我们以苹果中文官网为例,如果禁用了远程字体,主页的部分显示是这样的:

Firefox禁止远程字体加速网页加载及图标字体补充安装

考虑到图标字体出现的次数并不多,其实它们可能并不会过度影响阅读。但是,如果比较注重网页的完美显示,或者需要经常访问某些网页,一直缺失这些字符显然不能令人满意。为此,我们可以主动确认并安装这些字体。

在修复某个具体的页面时,我们首先要把gfx.downloadable_fonts.enabled暂时重新设置为true,F12打开相应页面的开发者工具,切换到网络选项,然后刷新页面,这样就会自动下载相应的字体文件。运气足够好的话,网页直接传输.ttf字体文件,那我们直接安装就可以,然而,也有一些网页选择传输.woff.woff2文件,比如苹果官网主页,如图所示:

Firefox禁止远程字体加速网页加载及图标字体补充安装

我们可以无视一般的字体文件,只寻找并下载图标字体,如这里很明显就是名字里带icon的两个。然后使用woff2解码工具解码,得到.ttf文件,再安装即可。这里我使用的是Google开发的woff2,Gitee上已有一个似乎是个人备份的源码仓库https://gitee.com/invictusjz/woff2-git?_from=gitee_search,直接下载安装包按照README使用即可。得到ttf后一样点击安装,再次关闭远程字体后,就依然能正常显示图标字体了:

Firefox禁止远程字体加速网页加载及图标字体补充安装

除此以外,我们还可以主动储备一些常用的图标字体,从而不需要每次都分析网页请求并下载。一个可供参考的列表是https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts。注意其中的Font Awesome Pro似乎已经失效,需要另外寻找备份。提前安装这个列表可以提前解决很多网页的图标字体显示问题。

本文由博客一文多发平台 OpenWrite 发布!