.ttf フォントが Web ページに表示されないのはなぜですか?

CSS を使用してフォント .ttf を組み込む

.ttf ファイルを使用して Web ページにグローバル フォントを組み込もうとする場合、フォントが変更されないと問題が発生します。考えられる原因をトラブルシューティングしてみましょう:

コードのトラブルシューティング

提供されたコードには、ブラウザ間の互換性のための重要な要素が欠けています。 .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>

オートメーション ツール

これらの複数のフォントの生成プロセスを簡素化するには

最新のブラウザのサポート

最新のブラウザの場合は、より簡潔なアプローチを選択できます。

<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 (ブラウザのサポート情報用)

以上が.ttf フォントが Web ページに表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。