Webブラウザーでの.otfフォントの使用


440

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

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

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


1
多分javascriptはここのタグリストから削除されるべきですか?
kzh

回答:


754

次の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");
}

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

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

お役に立てれば


1
ほとんどすべてのブラウザで問題なく動作しました...動作しなかった唯一のブラウザはFireFox Linuxです...そのための提案はありますか?
ナルト

3
これをWindowsサーバーでホストしている場合は、.otfファイルタイプを有効で提供されるファイルタイプとして追加する必要があります。これが問題であることを確認する唯一の方法は、フォントへのリンクをたどることです(もしそうなら404エラー)。テストのために、一時的に.ttfまたは.htmlに名前を変更できます。IEでサポートされている唯一のWebフォントはWOFF形式です。(いや、聞いたこともない!)
Henrik Erlandsson 2013年

ねえ、このタイプのフォントのパフォーマンスはどうですか?いいですか?または他の方が良いですか?
Anggie Aziz、

"コード例に引用符()がありませんか?
steffen

2
otfはほぼ全体的に機能するようです。caniuse.com/#search
Stephen

49

Googleのフォントディレクトリの例:

@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は主に.ttfと下位互換性があると述べています)そうでない場合は、.otfを.ttfに変換できます

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.