Web Font

Posted on Views: Disqus:

前言

博大精深的中文字裡，有很多古代使用，但現在不太使用的文字，比方說：「󼚹」，看不到對不對? 這個字是：

https://www.cns11643.gov.tw/wordView.jsp?ID=872821

為何顯示不出來？這就必須從 unicode 說起。我們在電腦上所有肉眼看得到的文字，都是透過 unicode 翻譯出來的，包含我們在資料庫裡的資料，也都是 unicode。 unicode 其實就是編碼表，每個文字都有一個特定獨立的編碼，當你的電腦，或是系統中所使用的 unicode 中，有該文字的編碼，那 unicode 就會把編碼轉換成文字呈現在你眼前，所以到目前，你閱讀到這邊所看到的所有文字，都是一個又一個的編碼。 unicode 本身又分為很多種類: UTF-8 、 UTF-16 等。由於本篇重點不在 unicode，有興趣可以另外搜尋。

解決方法

回歸正題，當我們在開發網頁時，如果遇到上面那種生僻字，我們該如何讓我們的網站能夠顯示出這個字呢？

我們先來說說問題原因。我們的網頁上顯示不出來，有兩個原因：

  1. 你的電腦沒有這個字的編碼。
  2. 在該網頁的系統中所使用的 unicode 並未涵括到該文字的編碼，導致網頁無法正確顯示出這個文字。

要解決字顯示不出來的問題，就是解決上述兩個原因。第一個的解決方法就是在電腦中安裝有該文字的字庫。但這不是個好方法，因為不太可能要求所有使用者都去安裝，所以身為開發人員的我們就要認命地從自己的系統裡去解決問題。

下載字庫

可以到 政府資訊公開網-CNS11643中文標準交換碼全字庫(簡稱全字庫) 下載政府提供的中文字字庫，裡面包含很多生僻字、古字等。

解壓縮後，我們只需要 TW-Kai-Ext.ttf 與 TW-Kai-Plus.ttf 。

放到 assets/fonts 裡

將上述兩個 ttf 檔放到 app/assets/fonts 底下，畢竟文字也算是前端資源，放在 assets 很合理，因為這個是跟字型有關的資源，所以目錄取為 fonts （當然你希望取其他名字也可以）。

設定 manifest.js

在 app/assets/config/manifest.js 裡，把上一步的 fonts 目錄引入: //= link_tree ../fonts

設定 CSS 的 font-family

因為本次分享經驗所使用的是 tailwindCss ，如果是使用其他工具的朋友，應該可以用相同概念來達到同樣的目的。

到 app/assets/stylesheets 底下新增一個 .css 檔: rare_words.css （名字可以任你取），接著在裡面設定新的 font-family ，而新的 font-family 來源 (src) 就是來自於剛剛的檔案。也就是說，當你設定了名為 TW-Kai-Ext 的 font-family 、來源為 TW-Kai-Ext.ttf 檔案，在使用該字型時，它會去找 TW-Kai-Ext.ttf 檔案裡面的 unicode，如此一來便是擴充了系統中的文字。

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: "TW-Kai-Ext";
  src: local("TW-Kai-Ext"), url("TW-Kai-Ext.ttf") format("truetype");
}

@font-face {
  font-family: "TW-Kai-Plus";
  src: local("TW-Kai-Plus"), url("TW-Kai-Plus.ttf") format("truetype");
}

直接使用新的 font-family

完成上述的建置後，我們就可以直接在前端上使用該字型：

1
<span class='TW-Kai-Ext TW-Kai-Plus'><%= @student_name %></span>

如此一來便能將原本無法出現的字顯示出來囉！

不過這邊要提醒，若此時還是沒有顯示出預期的文字，那就代表你使用的 ttf 檔未提供該文字的 unicode，此時就必須要想辦法找到其他 ttf 檔。

設定統一字型

在上述中，我們將兩種字型都寫進 class，讓兩個 ttf 檔都可以被使用到，避免文字涵蓋率的問題。也就是說，當 TW-Kai-Ext 沒找到該字的 unicode 時，會再去 TW-Kai-Plus 找。

但這樣寫實在不好看，所以我們可以到 tailwind.config.js 裡設定統一字型：

1
2
3
4
5
6
7
8
9
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'tw-kai': ['TW-Kai-Plus', 'TW-Kai-Ext']
      }
    }
  }
}

這樣就能夠把 TW-Kai-Plus 跟 TW-Kai-Ext （留意有順序問題，從左邊往右邊吃）統一合併成 tw-kai ：

1
<div class='tw-kai'><%= @student_name %></div>

結論

以上就是 Web font 的設定流程，這麼做是為了減少使用者額外安裝以及資料庫本身擴充字的成本。

當然如果想要更換成一些藝術字型，像是什麼華康秀風體、金梅浪漫體，也都是使用同樣的步驟來設定，但當然是要下載該字體的 ttf 檔案囉，畢竟相同文字、不同字型，編碼就是不一樣，所以想要換造型就是要另外給她新的衣櫃 ( ttf )！