CSS字體 - 播放：網絡上字體渲染的未來
- Jennifer Aniston原創
- 2025-02-16 08:49:17432瀏覽
鑰匙要點
- > CSS字體 - 播放描述符為開發人員提供了更多控製字體在加載時如何顯示字體，旨在改善用戶體驗和感知的性能。 >描述符在 @font-face At-Lule中起作用，並提供五個可能的值：自動，塊，交換，後備和可選。每個值都代表處理字體加載和渲染的不同策略。
- > >描述符在分為三個時期的時間軸上運行：塊，交換和失敗。這些時期的持續時間（無法由開發人員明確分配）決定了瀏覽器應如何渲染文本。
- >儘管在所有瀏覽器中尚未完全支持CSS字體 - 播放描述符，但它在網絡上標準化字體渲染行為方面是向前邁出的重要一步。
- 使用Web字體的弊端之一是，如果在用戶的設備上沒有字體，則必須下載它。這意味著在字體可用之前，瀏覽器必須決定如何處理任何使用該字體的文本塊的顯示。它需要以一種不會顯著影響用戶體驗和感知性能的方式做到這一點。
>輸入 @font-face At-Lule的字體 - 顯示描述符。此CSS功能引入了標準化這些行為並為開發人員提供更多控制的方法。
使用字體 - 播放
在詳細查看字體 - 播放提供的各種功能之前，讓我們簡要考慮一下您如何在CSS中使用該功能。>
首先，字體 - 播放不是CSS屬性，但是，如介紹中所述，它是 @font-face at rule的描述符。這意味著它必須在 @font-face規則中使用，如以下代碼中所示：
在此片段中，我定義了字體saira的掉期值。
所有可用值的關鍵字為：
>自動
<span><span>@font-face</span> {
</span> <span>font-family: 'Saira Condensed';
</span> <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2');
</span> <span>font-display: swap;
</span><span>}</span>blockswap
後備
- >可選
- font-display的初始值是自動的。
- >
在後面的部分中，我將詳細介紹每個值。但是首先，讓我們看一下瀏覽器用來確定要渲染的字體的時間段。在討論每個值時，我將解釋時間表的不同方面以及這些值如何為每個值行為。
font-display時間軸
該功能的核心是字體播放時間軸的概念。從其請求開始，並以其成功的加載或失敗結束，可以將字體加載時間分為三個連續的時期，以決定瀏覽器應如何呈現文本。這三個時期如下：- 塊週期。在此期間，瀏覽器以
- 的 sholdback字體呈現文本。如果請求的字體成功加載，則文本將使用該請求的字體重新渲染。無形的後備字體充當文本的空白佔位符。當執行重新渲染時，這會減少佈局變化。 >
- 交換期。如果尚未可用的字體，則使用後式字體，但是這次文本可見。同樣，如果加載字體進來，則使用它。
- 失敗期。如果該字體不可用，則瀏覽器將不等待，並且文本將在當前頁面訪問期間以後備字體顯示。請注意，這並不一定意味著字體加載已中止；相反，瀏覽器可以決定繼續它，因此該字體可以在同一用戶連續的頁面訪問中使用。
。
，但是這些持續時間不能由開發人員明確分配。在規範的早期階段檢查了這種可能性，但被刪除。相反，如上一節中概述了一組可以處理大多數用例的預定義關鍵字值。>讓我們看一下這些關鍵字中的每個關鍵字如何管理字體加載和顯示過程。
> font-display：auto>
此值告訴瀏覽器採用瀏覽器選擇的默認字體顯示行為。通常，此策略類似於下一個值。> font-display：block
>在短時間內（規格建議持續三秒鐘）後，掉期延伸到無窮大。這意味著在這種情況下，失敗時期是不存在的。
>瀏覽器短暫等待所請求的字體時，它以隱形後式字體呈現文本；之後，如果字體尚未可用，則使後備字體可見；每當下載完成時，瀏覽器都會用想要的字體重新呈現文本。
>您可以在以下視頻中觀看此行為，該視頻使用一個簡單的測試頁面，該頁麵包含特定的Web字體以進行標題：
>在頁面負載的開頭，標題是看不見的，但在DOM中存在。大約三秒鐘後，如果字體尚未可用，則可以通過後備字體可見文本。在視頻演示中，我使用Chrome DevTools的網絡節流功能模仿糟糕的網絡條件。最後，當字體設法下載時，標題會重新渲染。
>> font-display：swap
以這個值，塊週期倒塌到0，交換週期延伸至無窮大。因此，在這裡也缺少故障時期。
>>換句話說，瀏覽器不等待字體，而是立即用後備字體呈現文本。然後，只要字體可用，文本就會重新渲染。
>>讓我們驗證以下內容：
font-display：hallback
這是結合故障週期的第一個值。在較短的塊週期（建議使用100毫秒）之後，交換期現在的持續時間很短（建議3s）。結果，如果在此期間結束時尚未準備好所請求的字體，則文本將在頁面訪問期間使用後備字體顯示。這避免了可能會引起用戶體驗的後期佈局偏移來打擾頁面訪問者。
在下面的第一個視頻中，字體在超過六秒鐘後加載，因此它從不交換：
> 在下一個視頻中，在交換期間的超時之前，字體加載速度更快，因此該字體按預期使用：>
font-display：可選
>首次閱讀規範時，我發現分配給字體顯示策略的名稱不太清楚。甚至在規範本身中指出了這一點，這表明規格的未來版本使用可以更好地說明每種策略的預期使用，並提出以下替代方案：
- 需要塊
- 對於交換> 很重要
- >後備 最好
，但預計可選值將保持不變。實際上，這個價值很好地捕捉了它觸發的行為的本質。在這種情況下，該字體被認為是對頁面渲染的可選，從本質上講，請告訴瀏覽器：如果字體已經可用，請使用它，請使用，否則沒關係，請繼續使用後式字體；該字體可以在未來的頁面訪問
上可以使用>具有此值，字體顯示時間表的塊週期很短（Spec建議使用100 ms的時間間隔）和零持續交換週期。因此，故障週期緊隨塊週期，這意味著，如果字體不隨時可用，則不會在頁面訪問期間使用。但是該字體最終可以在後台完全下載，因此它可以在未來的頁面加載上立即渲染。
>>但我應該在這裡指出，尤其是在網絡條件下，用戶代理可以免費中止，甚至無法開始字體下載。這是為了不必不必要地影響網絡連接的質量。因此，該站點仍然可用，但是該字體在將來的頁面加載中不會立即可用。
>>在下面的視頻中，測試頁面已加載而無需限製網絡。該字體會很快下載，但僅在短時間後才下載，因此在所有訪問時間內顯示帶有後備字體的文本。
> 在下一個視頻中，
>>
在同一網絡條件下重新加載頁面，但是這次啟用了緩存，可以模擬第二次訪問：> https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342073fontdisplay06.mp4
>您有，現在的標題現在使用所需的Web字體呈現。 在繼續前進之前，請注意使用後備和可選值時，建議在塊週期中建議的非常短的持續時間。這是為了在使用後式字體之前允許短期內顯示快速加載字體（或從緩存中加載的一個加載），從而避免使用“未風格的文本”或fout。>我實際上想知道為什麼使用字體 - 播放：交換時，塊週期倒數為零，而不是使用與可選的相同的短間隔。事實證明，規格的GitHub存儲庫中存在一個空曠的問題，可以使用與其他人相同的“小塊週期”。
>關於後備字體
在上述討論中，我幾次提到了後備字體。但是它來自哪裡？>
後備字體是使用所討論元素上的字體家庭屬性定義的字體堆棧中的第一個可用字體。> 例如，在測試頁面上，標題的字體家庭值為：
> 可以驗證這一點（例如，請參見上面的視頻以獲取可選的視頻），例如在Windows計算機上，該機器將Arial用作渲染字體。
支持
<span><span>@font-face</span> { </span> <span>font-family: 'Saira Condensed'; </span> <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2'); </span> <span>font-display: swap; </span><span>}</span>在寫作時對字體 - 播放描述符的支持時，如下所示：自60
版本以來，Chrome已支持它 自第47版以來，Opera已支持它
> Firefox正在開發，自第46版以來就在國旗後面可用。 關於Safari，WebKit平台狀態報告它正在開發> >尚無跡象表明Microsoft Edge會很快支持它。 Microsoft Edge開發人員反饋網站上有一張票，可以在其中投票通過此功能的實現。
- 請參閱Caniuse.com以獲取最新支持信息。 >值得注意的是，可以通過功能查詢來測試字體 - 顯示支持，因為如上所述，它不是CSS屬性，而是字體描述符。在此GitHub問題中，您會發現有關如何正確檢測此功能的一些討論。
- > 一旦發現不支持字體 - 播放，就可以使用幾種後備策略，但這是本文的範圍。扎克·萊瑟曼（Zach Leatherman）的字體加載策略指南綜合指南對可用解決方案進行了詳盡的調查。 Google字體使用 >
- >您可能已經註意到，演示頁面中使用的字體來自Google字體，但並未以通常的方式加載，即鏈接到Font Provider提供的樣式表。取而代之的是，我只是複制了該樣式表中的字體的URL，並在我的自定義 @font-face規則中使用了該URL。我必須這樣做，因為如用法部分所示，必須在字體臉規則中指定字體 - 播放。 。
- >有更好，更多的Google字體友好方式嗎？ Google字體和其他第三方字體鑄造廠是否會支持字體顯示？
在Google字體上討論了這一點。添加您的1以顯示您對此功能的興趣！
>>另外，值得一提的是，CSS字體模塊4級別提出了字體- 播放作為@font-feature-values的描述符，以使開發人員能夠為@font-face for @font-face for note @font-fact pacter設置不屬於的顯示策略直接在他們的控制之下。但這尚未由任何用戶代理實施。
>>最終單詞
>我希望這能為您提供對字體 - 播放描述符的不錯的概述，以及此功能如何預示網絡上的字體呈現的強大未來。
>>儘管本文沒有討論針對字體 - 播放實施的不同策略的特定用例，但規範說明了用例使用了一些明確的示例，以及一些引用的參考文獻詳細介紹了此主題。因此，除了我在這裡介紹的基礎知識外，您還需要查看我引用的資源。
經常詢問有關CSS字體顯示和Web字體渲染的問題（常見問題解答）> > CSS字體顯示屬性是什麼，為什麼很重要？
> CSS字體播放屬性是CSS功能，它控制著網頁上的字體如何顯示字體，尤其是在字體上，尤其是在字體上仍在加載。該屬性至關重要，因為它會顯著影響網站上的用戶體驗。如果字體花費太長的加載，則可能會導致文本渲染的延遲，從而導致一種被稱為無形文本閃光燈（FOIT）或未經風格的文本閃光燈（FOUT）的現象。通過使用字體 - 播放屬性，開發人員可以控制此行為並改善整體用戶體驗。
如何工作？提供一組規則，以決定字體在加載時應如何表現以及何時無法加載。它接受了幾個值，包括“自動”，“塊”，“交換”，“後備”和“可選”。這些值中的每一個都代表了不同的加載策略，使開發人員可以靈活地選擇最適合其需求的策略。
>>字體 - 播放值之間有什麼區別？顯示值代表不同的字體加載策略。 “自動”將加載行為留在瀏覽器上。 “塊”給字體一個短時間和無限互換時期。 “交換”使字體具有零秒的塊週期和無限互換期。 “後備”為字體提供了很短的塊期和短交換期。 “可選”為字體提供了一個零秒的塊週期和零秒交換時期。
>如何在我的代碼中使用CSS字體 - 播放屬性？
>在代碼中使用CSS字體播放屬性，您需要將其包含在 @font-face規則中。這是一個示例：
@font-face {
font-fomily：'myfont';
src：url（'myfont.woff2'）格式（'woff2'） -display：swap ;
}
在此示例中，字體- 播放屬性設置為'swap'，這意味著如果沒有“ myfont”，則文本將立即用後式字體顯示。 >
CSS字體播放屬性對網站性能有何影響？> CSS字體播放屬性會極大地影響網站性能。通過控制加載過程中字體的顯示方式，它可以幫助防止文本渲染的延遲，從而提高網站的感知加載速度。它還可以幫助避免由延遲加載字體引起的佈局偏移，從而導致使用更順暢的用戶體驗。
> CSS字體 - 播放屬性如何影響隱形文本（FOIT）的閃光（FOIT）和未風格的文本（ fout）？
css font-display屬性直接解決了FOIT和FOUT的問題。通過允許開發人員控製字體加載行為，它可以防止文本在加載過程中變得不可見或不變。例如，將字體放置屬性設置為“交換”可以通過立即使用後備字體顯示文本來消除FOIT。
使用CSS Font-Display屬性有哪些最佳實踐？ 🎜>使用CSS字體播放屬性的一些最佳實踐包括根據您的需求選擇正確的值，並測試不同瀏覽器和網絡條件上的加載行為。還建議使用與自定義字體的指標相匹配的後備字體，以最大程度地減少佈局變化。
我可以使用在第三方服務上託管的Web字體的CSS字體播放屬性？
是的，您可以使用在第三方服務上託管的Web字體的CSS字體播放屬性。但是，重要的是要注意，並非所有服務都支持此功能。您應該檢查文檔或與服務提供商聯繫以獲取更多信息。>
使用CSS Font-Display屬性有任何限製或缺點嗎？顯示屬性是在所有瀏覽器中都沒有完全支持它。例如，Internet Explorer和其他舊版本的其他瀏覽器不支持此功能。此外，“可選”值可能會導致自定義字體在某些情況下完全跳過，這可能會影響您的網站的視覺一致性。> CSS字體顯示屬性如何符合全面的Web性能策略？
> CSS字體播放屬性只是全面的Web性能策略中的一種工具。雖然它可以幫助提高感知的加載速度並防止佈局變化，但應與其他性能優化技術一起使用，例如最大程度地減少CSS和JavaScript文件的大小，優化圖像，並使用內容交付網絡（CDN） 。
以上是CSS字體 - 播放：網絡上字體渲染的未來的詳細內容。更多資訊請關注PHP中文網其他相關文章！