Google Fonts API text 參數優化:減少字體檔案大小提升網頁載入速度

4 分鐘閱讀

這篇提問想分享的其實是如何快速使用 Felo Search 找到出處和參考資料。

在實作網頁極致調校時,字體加載速度是一項必定要改善的項目。有時從上一個專案中抄東西過來改,會忘記原本這個東西怎麼使用,而想要查找參考資料和文件。這時候像是 Felo Search 這樣的服務就非常有用。

過往我們可能會在腦中組織關鍵字然後 Google 搜尋,但現在有了 AI 搜尋引擎,我們可以直接 copy paste 並叫他解釋,AI 能幫我們找到相關的資料和參考來源。

連動腦想關鍵字都不需要,更懶了!😝

琳 avatar
<link
    href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap&text=晚餐吃什麼火鍋牛肉麵排館拉便當店自助夜市速食中"
    rel="stylesheet"
/>

explain the "text" parameters here and give me the references

Felo Search avatar
Felo Search

在這段 <link> 標籤中,text 參數用於指定僅下載和顯示特定字符。這樣可以減少字體文件的大小,從而加快網頁加載速度。以下是這段 <link> 標籤的詳細解釋:

<link
  href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap&text=晚餐吃什麼火鍋牛肉麵排館拉便當店自助夜市速食中"
  rel="stylesheet"
/>

參數解釋

參考資料

  1. Google Fonts API 文檔 提供了如何使用 text 參數的詳細說明。
  2. Google Fonts CSS API v2 支持 text 參數來指定特定字符。
  3. Google Fonts 的最佳實踐 提到使用 text 參數可以優化字體加載時間。

這些參數的使用可以顯著提升網頁的性能,特別是在需要使用大量自定義字體的情況下。

上面第三項參考資料是 AI 幻覺,它瞎掰的。

  1. How to use the text parameter with the google fonts API for just one font type - Stack Overflow

  2. Support text parameter for font queries · Issue #36 · nuxt-modules_google-fonts

  3. Get Started with the Google Fonts API | Google for Developers