為什麼我的自訂 TrueType 字型 (.ttf) 不能在 CSS 中運作？

在 CSS 中使用自訂字體：綜合指南

使用獨特字體設計網頁樣式可以增強使用者體驗並增添個性。然而，合併自訂字體也帶來了自身的挑戰。在 CSS 中使用 TrueType 字型 (.ttf) 檔案時會遇到一個常見問題。

問題：

使用者在其 CSS 程式碼中包含 .ttf 文件，但所需的字體變更未套用於頁面。程式碼如下所示：

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}</code>

分析：

對於瀏覽器顯示自訂字體，為它們提供廣泛支援的多種檔案格式非常重要。僅依靠 .ttf 檔案可能不足以實現跨瀏覽器相容性。

解決方案：

為了確保最佳的字體支持，最佳實踐是使用組合字體格式：

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}</code>

這種全面的方法為各種舊版和現代瀏覽器提供支援。為了簡化這個過程，使用者可以使用 Font Squirrel 或 Transfonter 等網頁字體產生器。

現代瀏覽器，例如 Chrome 6 、 Firefox 3.6 和 IE 9 ，優先考慮 .woff 字體格式。因此，針對這些瀏覽器的更簡潔的解決方案可能是：

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  </code>

其他資源：

• CSS 技巧：https://css -tricks。 com/snippets/css/using-font-face/
• 我可以使用：https://caniuse.com/?search=fontface

以上是為什麼我的自訂 TrueType 字型 (.ttf) 不能在 CSS 中運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！