避免使用閃爍的文字

凱蒂漢佩尼斯
Katie Hempenius
X

本程式碼研究室將說明如何使用字型觀測工具立即顯示文字。

新增字型觀察器

「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')。Times 和 Serif 是備用字型，因此您不必為這些字型宣告 FontFaceObserver。

偵測字型載入情形

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

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」。

草寫字型中的標題。