禁止遠程字體的作用
作為程序員士鸥，日常工作中我們可能經常需要打開國內外許多不同的網站尋找教程赁项，但是很多國外網站籽暇，特別是基于WordPress的博客蛾洛，往往會使用Google字體养铸，這是使得我們訪問這些網站的時候會自動嘗試加載這些字體，而嚴重影響打開速度轧膘。這時候我們可以考慮禁止所有的遠程字體以加速訪問钞螟。雖然這樣會影響所有網站的字體顯示，但如果本地安裝了Noto系列等優(yōu)秀的字體谎碍，幾乎不會因此遇到常規(guī)中英文鳞滨、emoji的顯示問題。強制使用本地字體代替遠程顯然對任何相關網站都能起到加速作用椿浓。
禁止遠程字體的方法
- 在地址欄輸入
about:config打開配置 - 搜索
gfx.downloadable_fonts.enabled太援，將其值改為false即可
這樣會強制禁止網頁下載遠程字體闽晦，而使用本地字體代替扳碍。其他的一些相關配置，如在字體設置中取消勾選“允許網頁選擇字體”等仙蛉，似乎只能改變字體的顯示笋敞，無法起到禁用字體下載以加速的作用。
圖標字體無法顯示問題及解決方法
雖然絕大部分的字符可以顯示荠瘪，但是有一類比較特殊夯巷，就是所謂圖標字體（icon font）。前端開發(fā)可能對它比較熟悉哀墓，我自己的理解就是一類特殊的Unicode字符趁餐，需要有特定的字體支撐，而往往不能用另一種圖標字體來替代篮绰，在實際操作中一般假定用戶沒有安裝相應的字體后雷，而是通過CSS的@font-face等方式來加載遠程字體文件。這樣的字體在本地安裝了相應的字體文件后，可以正常顯示臀突，但是如果沒有安裝勉抓，同時又禁止了遠程字體，就會顯示為方框候学，里面有4位十六進制的編碼藕筋。下面，我們以蘋果中文官網為例梳码，如果禁用了遠程字體隐圾，主頁的部分顯示是這樣的：
考慮到圖標字體出現(xiàn)的次數并不多，其實它們可能并不會過度影響閱讀掰茶。但是翎承，如果比較注重網頁的完美顯示，或者需要經常訪問某些網頁符匾，一直缺失這些字符顯然不能令人滿意叨咖。為此，我們可以主動確認并安裝這些字體啊胶。
在修復某個具體的頁面時甸各，我們首先要把gfx.downloadable_fonts.enabled暫時重新設置為true，F(xiàn)12打開相應頁面的開發(fā)者工具焰坪，切換到網絡選項趣倾，然后刷新頁面，這樣就會自動下載相應的字體文件某饰。運氣足夠好的話儒恋，網頁直接傳輸.ttf字體文件，那我們直接安裝就可以黔漂，然而诫尽，也有一些網頁選擇傳輸.woff或.woff2文件，比如蘋果官網主頁炬守，如圖所示：
我們可以無視一般的字體文件牧嫉，只尋找并下載圖標字體，如這里很明顯就是名字里帶icon的兩個减途。然后使用woff2解碼工具解碼酣藻，得到.ttf文件，再安裝即可鳍置。這里我使用的是Google開發(fā)的woff2辽剧，Gitee上已有一個似乎是個人備份的源碼倉庫https://gitee.com/invictusjz/woff2-git?_from=gitee_search，直接下載安裝包按照README使用即可税产。得到ttf后一樣點擊安裝怕轿，再次關閉遠程字體后坊夫，就依然能正常顯示圖標字體了：
除此以外，我們還可以主動儲備一些常用的圖標字體撤卢，從而不需要每次都分析網頁請求并下載环凿。一個可供參考的列表是https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts。注意其中的Font Awesome Pro似乎已經失效放吩，需要另外尋找備份智听。提前安裝這個列表可以提前解決很多網頁的圖標字體顯示問題。
本文由博客一文多發(fā)平臺 OpenWrite 發(fā)布渡紫！
