537

オンラインでフォントの試用が必要なWebサイトで作業していますが、使用しているフォントはすべて.otfです。

フォントを埋め込み、すべてのブラウザで機能させる方法はありますか？

そうでない場合、他にどのような選択肢がありますか？

4

2 に答える 2

932

OTF次のように@font-faceを使用してフォントを実装できます。

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

//編集：OTFはほとんどのブラウザで機能するようになりました。コメントを参照してください

ただし、さまざまなブラウザをサポートしたい場合はWOFF、TTFフォントタイプに切り替えることをお勧めします。WOFFタイプはすべての主要なデスクトップブラウザによって実装されますが、TTFタイプは古いSafari、Android、およびiOSブラウザのフォールバックです。フォントがフリーフォントの場合、たとえばトランスフォンターを使用してフォントを変換できます。

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

まだ存在しているほぼすべてのブラウザをサポートしたい場合（IMHOはもう必要ありません）、次のようなフォントタイプを追加する必要があります。

@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-フォントブラウザのサポート

于 2010-07-14T10:20:16.187 に答える
58

Google Font Directoryの例から:

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

これは .ttf でクロス ブラウザーで動作します。.otf で動作する可能性があると思います。(ウィキペディアによると、.otf は .ttf とほとんど下位互換性があるとのことです) そうでない場合は、.otf を .ttf に変換できます。

ここにいくつかの良いサイトがあります：

于 2010-07-14T10:39:36.297 に答える