ホームページ > ウェブフロントエンド > CSSチュートリアル > Web ブラウザ用の .OTF フォントを実装し、ブラウザ間の互換性を確保するにはどうすればよいですか?

Web ブラウザ用の .OTF フォントを実装し、ブラウザ間の互換性を確保するにはどうすればよいですか?

DDD
リリース: 2024-10-31 09:23:29
オリジナル
293 人が閲覧しました

How Do I Implement .OTF Fonts for Web Browsers and Ensure Cross-Browser Compatibility?

Web ブラウザ用の .OTF フォントの実装

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 */
}
ログイン後にコピー

さまざまなフォント形式のブラウザ サポートの詳細については、次のリソースを参照してください:

  • @font-face ブラウザ サポート
  • EOT ブラウザ サポート
  • WOFF ブラウザのサポート
  • TTF ブラウザのサポート
  • SVG フォント ブラウザのサポート

以上がWeb ブラウザ用の .OTF フォントを実装し、ブラウザ間の互換性を確保するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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