Base64 轉換後如何保留原始字體外觀以進行 Webfont 載入？

轉換為 Base64 時保留原始字體外觀

延遲字體載入可以增強網站效能。關鍵一步是將字體轉換為 base64 並將其合併到您的 CSS 檔案中。但是，將字體轉換為 Base64 有時會改變其外觀。

要在Base64 轉換後保持字體的原始外觀，請確保執行以下步驟：

1. 優化字體Squirrel 設置:
   使用Font Squirrel Webfont Generator 時，在「TrueType」下選擇「Keep Existing」專家設定中的「提示」選項。
2. 使用原始 GWF 檔案：
   如果您對直接從 Google Web Fonts (GWF) 渲染的字體感到滿意，請下載原始檔案並自行進行base64編碼。在 OS X 或 Linux 上，使用 base64 指令：

$ base64 -i myfont.ttf -o fontbase64.txt

對於 Windows，請使用 base64 編碼工具。將 base64 字串複製到 CSS 中：

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
    font-weight: normal;
    font-style: normal;
}

調整 @font-face 資訊以符合您的字體資料。透過遵循這些方法，您可以保留字體的原始外觀，同時實現 Base64 編碼以延遲字體載入。

以上是Base64 轉換後如何保留原始字體外觀以進行 Webfont 載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！