ホームページ > ウェブフロントエンド > CSSチュートリアル > .ttf フォントが Web サイトで正しく表示されないのはなぜですか?

.ttf フォントが Web サイトで正しく表示されないのはなぜですか?

Susan Sarandon
リリース: 2024-11-05 11:26:02
オリジナル
778 人が閲覧しました

Why Does My .ttf Font Not Display Properly in My Website?

CSS 経由で .ttf フォントを組み込む

問題:

を実装しようとしていますWeb ページのグローバル フォントである .ttf ファイルが CSS に含まれていました。ただし、フォントは意図したとおりに表示されません。

コード スニペット:

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

html, body, div, span, ... {
    font-family: oswald;
}</code>
ログイン後にコピー

根本原因:

Web フォントの実装では、.ttf ファイルを提供するだけではブラウザ間の互換性が不十分です。

解決策:

異なるブラウザ間の互換性をサポートするには、複数のフォントを組み合わせます。推奨形式:

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compatibility Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, iOS, Android */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}</code>
ログイン後にコピー

代替アプローチ:

ブラウザのサポートを向上させるため、最新のブラウザでは .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 トリック: @font-face の使用: https://css-tricks.com/snippets/css/using-font-face/
  • フォントフェイスを使用できますか: https://caniuse.com/?feat=fontface

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート