為什麼我的 .ttf 字體沒有顯示在我的網頁中？

使用CSS 包含.ttf 字體

當嘗試使用.ttf 檔案為網頁合併全域字體時，您可以如果您的字體沒有更改，則會遇到問題。讓我們排查可能的原因：

程式碼疑難排解

提供的程式碼缺少跨瀏覽器相容性的關鍵元素。除了.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 等工具。

現代瀏覽器支援

對於現代瀏覽器，您可以選擇更簡潔的方法：

<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>

其他資源

• https://css-tricks.com/snippets/css/using-font-face/
• https： //caniuse.com/#feat=fontface（#feat=fontface（瀏覽器支援資訊）

以上是為什麼我的 .ttf 字體沒有顯示在我的網頁中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！