如何使用 .ttf 包含自訂字體並確保跨瀏覽器相容性？

包含使用.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>

此程式碼假設您有 .eot、.woff、.適用於您的網頁字體的 ttf 和 SVG 格式。像 Font Squirrel 或 Transfonter 這樣的 Web 字體產生器可以自動執行此程序。

現代方法：

現代瀏覽器喜歡.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 技巧：使用@font-face：https://css-tricks.com/snippets/css/using -font-face/
• 我可以使用字體嗎：https://caniuse.com/fontface

以上是如何使用 .ttf 包含自訂字體並確保跨瀏覽器相容性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！