一般來說,中文的 Web Fonts 有三個問題:
- 沒對應字形,完全不顯示
- 永遠只顯示最醜的那一個替代字形
- 字都閃一下才顯示出來
對於龜毛到會挑替字型的人,你是沒辦法說服他字才閃個 0.001 秒根本就是小事。
為了用 Google Fonts 的思源黑體,究竟要下載多大的字型檔後、等多久之後,才能在瀏覽器中顯示三個字:
你無聊
還要讓他閃個幾下呢! 其實,都不用,瞬間就直接用思源黑體顯示,閃都不閃的啦!
實作請看:
字型可以用 Firefox 確認是不是童叟無欺:
關鍵在於,字型檔才 2K 而已,下面那個 updog.co 的 logo 還比字型檔大:
其實只是用了 Web Font API,雖然幕後的內情肯定不單純。
<html>
<head>
<meta charset="utf-8"/>
<style>h1 {font-family: 'Noto Sans TC', sans-serif;}</style>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap&text=你無聊' rel='stylesheet'/>
</head>
<body>
<h1>你無聊</h1>
</body>
</html>