在 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>
其他資源:
以上是為什麼我的自訂 TrueType 字型 (.ttf) 不能在 CSS 中運作?的詳細內容。更多資訊請關注PHP中文網其他相關文章!