如何將網頁字體轉換並渲染為 Base64，同時保持其原始外觀？-css教學-PHP中文網

如何將網頁字體轉換並渲染為 Base64，同時保持其原始外觀？

Linda Hamilton

發布： 2024-11-28 03:26:14

原創

960 人瀏覽過

How Can I Convert and Render Web Fonts to Base64 While Maintaining Their Original Appearance?

將Web 字體轉換和渲染為Base64，同時保留外觀

實現延遲字體載入時，將字體編碼為Base64 而不影響其原始外觀至關重要。以下是實現相同渲染的逐步指南：

設定 Font Squirrel Webfont 產生器： 確保「TrueType 提示」選項設定為「保持現有」。這會保留原始字體提示，保留其渲染。
GWF 檔案的 Base64 編碼（可選）： 或者，您可以直接使用 Google Web Fonts 中的字型檔案。使用命令列（Mac/Linux）將其編碼為base64：

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

登入後複製

或base64編碼器工具（Windows）。

CSS實作： 在CSS 中使用編碼字體，如下所示template:

@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;
}

登入後複製

透過執行以下步驟，您可以成功推遲網站上的字體加載，同時保持原始字體外觀，確保最佳的用戶體驗。

以上是如何將網頁字體轉換並渲染為 Base64，同時保持其原始外觀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！