如何透過@font-face和正確的MIME類型實現跨瀏覽器相容性？

具有正確MIME 類型的跨瀏覽器@font-face

使用@font-face 規則嵌入字體時，指定正確的MIME類型對於跨瀏覽器的正確渲染至關重要。在這種情況下，Chrome 由於 MIME 類型不正確而顯示錯誤。

為了解決這個問題，讓我們檢查跨瀏覽器相容的@font-face 聲明：

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

• .eot（適用於IE）： IE 需要.eot 檔案格式。
• .woff 或 .ttf（適用於其他瀏覽器）：其他瀏覽器支援 .woff 或 .ttf。

要從來源字體產生這些字體格式，請使用 Font Squirrel 的字體產生器。

此外，需要一個.htaccess 檔案來指定字體格式的MIME 類型：

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

透過實作這些更改，@font-face 規則將在Firefox 和Chrome 中正確嵌入字體，確保跨瀏覽器呈現一致的渲染。

以上是如何透過@font-face和正確的MIME類型實現跨瀏覽器相容性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！