首頁 > web前端 > css教學 > 主體

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

Susan Sarandon
發布: 2024-11-06 19:50:02
原創
307 人瀏覽過

Why Isn't My Custom TrueType Font (.ttf) Working in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板