カスタム TrueType フォント (.ttf) が CSS で機能しないのはなぜですか?

CSS でのカスタム フォントの使用: 総合ガイド

独自のフォントで Web ページのスタイルを設定すると、ユーザー エクスペリエンスが向上し、個性が加わります。 。ただし、カスタム フォントを組み込むと、独自の課題が生じます。 CSS で TrueType フォント (.ttf) ファイルを使用するときに、一般的な問題が 1 つ発生します。

問題:

ユーザーが 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 などの Web フォント ジェネレーターを利用できます。

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 中国語 Web サイトの他の関連記事を参照してください。