我的烏拉拉練功坊

請來參觀移植到 Google Firebase 的成績 https://oolala.xyz/ken73chen/

2019年8月24日

Google Font API

一般來說,中文的 Web Fonts 有三個問題:
  1. 沒對應字形,完全不顯示
  2. 永遠只顯示最醜的那一個替代字形
  3. 字都閃一下才顯示出來
對於龜毛到會挑替字型的人,你是沒辦法說服他字才閃個 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>

沒有留言:

張貼留言