來源 | dev.to/nickbulljs
譯者 | 鬼哥
如果您使用具有不同字體粗細的非系統字體，則字體文件的大小將很大。瀏覽器將需要更多時間來下載它們。這會給你帶來兩個思考：
瀏覽器可以隱藏文本，直到下載自定義字體為止。此問題稱為“看不見的文字閃爍”或FOIT。瀏覽器可以顯示默認系統字體，直到下載自定義字體為止。這稱為“未樣式化文本的閃爍”或FOUT。這樣可使網頁加載速度更快，但會破壞用戶體驗。
您可能會想，“這又有什麼問題？只是幾秒鐘而已。至少用戶可以看到一些東西，對嗎？” 但是，如果用戶網絡速度很慢且字體需要數十秒才能下載，會發生什麼呢？或者，如果字體根本沒有加載呢？用戶體驗必然就差了。
但是不用擔心。可以防止這種損壞。
❝CSS具有三個屬性，可幫助優化您網站上的自定義字體。
❞
1.font-display
該屬性定義瀏覽器如何加載和顯示字體文件。
font-display屬性接受五個值：< span >
auto（默認）：允許瀏覽器使用其默認方法進行加載。通常表現為block屬性。
block：瀏覽器將隱藏文本，直到完全下載字體為止。瀏覽器使用不可見的佔位符繪製文本（文本不可見），然後在加載後立即將其與自定義字體替換。您會得到一個FOIT（不可見文本的閃爍）。
swap：瀏覽器使用後備字體顯示文本，直到完全下載自定義字體為止。沒有封鎖期。文本立即顯示。您將得到一個FOUT（無樣式文本的閃爍）。
fallback：充當auto和swap值之間的折衷。瀏覽器將文本隱藏大約100毫秒，如果尚未下載字體，則瀏覽器將使用後備文本。下載後，它將交換為新字體，但僅在很短的交換期內（可能為三秒鐘）。
optional：但是，此值還允許瀏覽器使用用戶的連接速度作為確定因素來確定是否甚至使用了自定義字體，從而較慢的連接不太可能接收到自定義字體。
那到底使用什麼呢？
對於主體文本，請使用optional。用戶將獲得快速的內容，並且如果Web字體下載花費的時間太長，他們在閱讀您的文章的一半時將不會得到頁面的重新佈局。
瀏覽器支持度 90.49％
2.text-rendering
該屬性向渲染引擎提供有關在渲染文本時要進行哪些優化的信息。
這是在任何CSS標準中都未定義的SVG屬性。但是，通過Gecko和WebKit瀏覽器，您可以將此屬性應用於Windows，macOS和Linux上的HTML和XML內容。
text-rendering屬性僅適用於Windows和Linux。
text-rendering幾個有效值：
auto：瀏覽器會做出有根據的猜測，以決定何時在繪製文本時針對速度，清晰度和幾何精度進行優化。
optimizeSpeed：瀏覽器在繪製文本時強調渲染速度，而不是清晰度和幾何精度。它禁用字距調整和連字，有時會關閉抗鋸齒功能。 （在排版中，字距調整是調整比例字體中字符之間的間距的過程，通常可實現視覺上令人滿意的效果）
optimizeLegibility：瀏覽器強調渲染速度和幾何精度方面的可讀性。這樣可以啟用字距調整和可選連字，並且通常應用抗鋸齒或字體提示來顯示最清晰的文本。
geometricPrecision：瀏覽器在渲染速度和可讀性上強調幾何精度。通常，此選項使瀏覽器不使用提示。
那到底使用什麼呢？
這裡沒有明確的建議。如果您查看大型網站的源代碼，則會看到它們使用optimizeLegibility。
瀏覽器支持度 90.16％
3.font-smooth
font-smooth屬性控制渲染時的字體抗鋸齒。
font-smooth目前不在標準軌道上，僅在macOSX平台上有效。未經仔細考慮，不應使用它。
WebKit中的可選值
auto：讓瀏覽器決定。如果可用，通常會使用亞像素抗鋸齒功能。
none：關閉字體平滑。顯示帶有鋸齒狀尖銳邊緣的文本。
antialiased：在子像素（而不是子像素）的水平上使字體平滑。從亞像素渲染切換為深色背景上的淺色文本的抗鋸齒功能，使其看起來更亮。
subpixel-antialiased：在大多數非視網膜顯示器上，這將給出最清晰的文本。
Firefox中的可選值
auto：允許瀏覽器選擇一種優化字體平滑的方法，通常是grayscale。
grayscale：使用灰度抗鋸齒效果渲染文本，而不是子像素。從亞像素渲染切換為深色背景上的淺色文本的抗鋸齒功能，使其看起來更亮。類似於WebKit antialiased。
那到底使用什麼呢？
嘗試嘗試字體平滑。它可能對內容的可讀性有很大的影響。大型網站經常使用antialiased和grayscale。但這通常會導致文本太細，權重較小。
瀏覽器支持度 93.16％
1.如果看到這裡，說明你喜歡這篇文章，請 轉發、點贊、在看< /code>同時 標星（置頂）
2.關注公眾號前端人，回复資料包領取我整理的前端進階資料包
3.回复加群，加入前端進階群，和小伙伴一起學習討論!
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/3%20CSS%20Font%20Properties%20You%20Should%20Be%20Using%20in%202020.html
支付宝扫一扫 
评论列表（196条）
测试