使用字體顯示設定自訂網頁字體效能

上次更新時間 2023年7月11日

了解如何使用字體顯示設定來修改網頁字體效能。

字體顯示設定可讓您指定如何在網頁瀏覽器中載入網頁字體並套用到您的網站。 有五個字體顯示選項:

字體顯示值

行為 

自動

允許瀏覽器以其預設方法載入字體。

封鎖

隱藏網站上的文字,直到下載了網頁字體。 您的網站訪客可能會看到隱藏文字的 Flash 或含有此選項的 FOIT

交換

顯示在 CSS 中設定的後備字體直到網頁字體下載。 使用此選項時,您的網站訪客可能會看到未套用樣式的文字閃現或FOUT。  

後備

在短時間內使用封鎖行為,然後切換到交換行為並將後備字體套用到文字。 如果 Web Fonts 在交換期間結束時尚未載入,則會繼續使用後備字型。 

選擇性

在短時間內使用封鎖行為,然後將後備字體套用到文字。 此值讓網頁瀏覽器可以選擇完全不下載網頁字型,例如,如果網站訪客的網路連線速度較慢。 

如需字體顯示和支援值的技術詳細資訊,請參閱「CSS 字體模組等級 4 規格」。

備註

根據預設,使用字體顯示建立的網頁字體專案設定為自動

若要自訂字體顯示設定,請依照下列步驟進行:

在您的網頁專案頁面中,按一下「編輯專案」。

編輯專案
編輯專案

從側邊欄中選取以下任一字體顯示值。 根據預設,網頁字型專案的 font-display 設定會設為 auto。  

font display settings

請按一下「儲存變更」並在幾分鐘內將字體顯示值套用到您的網站。

新的字體顯示設定將作為現有內嵌程式碼的一部分自動包含在您的網站中。

更新現有的網頁專案

已新增字體顯示支援到 2020 年 9 月的 Adobe 網頁字體載入中。 在 2020 年 9 月之前建立的網頁專案已更新為使用預設 font-display: auto 行為。 

透過遵循上述步驟,可以變更任何現有專案的字體顯示設定。 一旦儲存變更,新的字體顯示設定將作為現有內嵌程式碼的一部分包含在您的網站中。 您不需要對網站本身進行變更。