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>
追加リソース:
以上が.ttf フォントが Web サイトで正しく表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。