web-dev-qa-db-ja.com

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

私はオンラインでフォントの試用を必要とするWebサイトに取り組んでいます。私が持っているフォントはすべて.otfです。

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

そうでなければ、他にどのような選択肢がありますか？

htmlcssfontsfont-face
364
Naruto

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

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

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

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

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

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

お役に立てれば

621
choise

Googleフォントディレクトリ examplesから：

@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）そうでなければ、 convert .otfを.ttfに変換できます

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

41
kzh