避免使用閃爍的文字

Katie Hempenius
Katie Hempenius

本程式碼研究室將說明如何使用 Font Face 立即顯示文字 Observer

新增字型錶面觀察工具

Font Face Observer 是一種指令碼 它會偵測字型 fontfaceobserver.js敬上 檔案已儲存至專案目錄,所以您不需要新增 。不過,您必須為廣告代碼新增指令碼標記。

  • 按一下「Remix to Edit」即可編輯專案。
  • fontfaceobserver.js 的指令碼標記新增至 index.html
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

使用字型錶面觀察工具

建立觀察者

針對網頁上使用的每一個字型系列建立觀察器。

  • fontfaceobserver.js 指令碼後方新增下列指令碼。這會建立 「Pacifico」的觀察者和「Roboto」字型系列:
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

如果不確定該建立哪種字型觀察器,只要找出 CSS 中的 font-family 宣告。將這些宣告的 font-family 名稱傳遞至 FontFaceObserver()。您不需要建立 備用字型

舉例來說,如果你的 CSS 為:

font-family: "Times New Roman", Times, serif;

建議新增 FontFaceObserver('Times New Roman')時間與 Serif 為 因此您不需要為這些字型宣告 FontFaceObservers。

偵測字型載入

用於偵測字型載入的程式碼如下所示:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() 是可在字型載入時解決的承諾。

示範網站使用兩種字型,因此您需要使用 Promise.all() 等兩種字型都載入完成

  • 請在指令碼中,將這項承諾加到指令碼的 FontFaceObservers 下方 剛宣告:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️入住

您的指令碼現在看起來應該會像這樣:

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

套用fonts-loaded類別

  • 將指令碼中的 /* Do things */ 註解替換為這一行:
document.documentElement.classList.add("fonts-loaded");

這會將 fonts-loaded 類別新增至文件的根元素 ( <html> 標記),

✔️入住

完成的指令碼看起來會像這樣:

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

更新 CSS

網頁的樣式應設為使用系統字型和一次自訂字型 已套用 fonts-loaded 類別。

  • 更新 CSS:
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

驗證

  • 如要預覽網站,請按下「查看應用程式」。然後按下 全螢幕 全螢幕

如果頁面看起來像這樣,表示已成功實作「字型」 觀察器並去除「隱形文字」的「Flash of Invisible Text」。

採用遞迴字型的標題。