如何在 CSS 中包含 .ttf 字體以獲得最佳的跨瀏覽器相容性？

在CSS 中包含.ttf 字體：綜合指南

要將自訂字體合併到您的網頁中，CSS 使用@font -麵規則。然而，僅包含 .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>

此程式碼假設您有.eot、.woff、 .ttf 和svg 字體格式。若要簡化流程，請使用 Font Squirrel 或 Transfonter 等網頁字體產生器。

現代方法：WOFF 字型類型

現代瀏覽器支援 .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-Tricks 指南：https://css-tricks.com/snippets/ css/using-font-face/
• 瀏覽器支援： https://caniuse.com/fontface

以上是如何在 CSS 中包含 .ttf 字體以獲得最佳的跨瀏覽器相容性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！