Web ブラウザに .OTF フォントを埋め込んで利用するには、@font-face ルールを利用できます。以下に例を示します。
@font-face { font-family: GraublauWeb; src: url("path/GraublauWeb.otf") format("opentype"); }
注: OTF フォントは、ほとんどの主要なブラウザでサポートされるようになりました。
より幅広いブラウザをサポートするための代替手段
ブラウザの互換性をさらに高めるには、Web Open Font Format (WOFF) フォントと TrueType Font (TTF) フォントの使用を検討してください。
WOFF フォントと TTF フォントの使用
@font-face { font-family: GraublauWeb; src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype"); }
レガシー ブラウザ向けの包括的なフォント サポート
IE6 ~ 9、Android 2.3 ~ 4.3、iOS 4 ~ 5 などのブラウザをサポートするには、追加のフォント タイプを追加します。
@font-face { font-family: GraublauWeb; 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 */ }
さまざまなフォント形式のブラウザ サポートの詳細については、次のリソースを参照してください:
以上がWeb ブラウザ用の .OTF フォントを実装し、ブラウザ間の互換性を確保するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。