ウェブブラウザで .otf フォントを使用する質問する

Question

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タイプはすべての主要なデスクトップブラウザで実装されていますが、タイプは古いSafari、Android、iOSブラウザのフォールバックです。フォントがフリーフォントの場合は、たとえばを使用してフォントを変換できます。TTFWOFFTTFトランスフォント。

@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 */
}

これらのタイプが実装されている理由とそのハックの詳細については、こちらをご覧ください。ここどのブラウザでどのファイルタイプがサポートされているかの詳細については、以下を参照してください。

Answer 1