3

私はこのように埋め込んだ独自のカスタムフォントを使用しています：

@font-face{font-family:myFont;src:url(css/fonts/myFont.woff);}
@font-face{font-family:myBoldFont;src:url(css/fonts/myBoldFont.woff);}

したがって、太字フォントを使用したい場合は、次のようにします。

<style>
.bold{
    font-family:"myBoldFont";
}
</style>
<div class="bold">Hello world</div>

また、デフォルトで太字のタイポグラフィを使用するすべてのcss定義を上書きする必要があります。

<style>
    strong,h1,h2,h3,h4,h5,h6,h7,h8{
        font-family:"myBoldFont";
        font-weight:normal;
    }
</style>

ご覧のとおり、この.woffファイルには「太字」の定義がないため、font-weight:normal設定font-weight:boldするとブラウザが正しいフォントを見つけられず、フォールバックを実行するため、設定する必要があります。

@font-faceしたがって、これは.woffファイルをサポートするブラウザーで非常にうまく機能します。古いiOSデバイスなど、そうでないブラウザの場合、次のようなフォールバックを設定する必要があります。

font-family:"myBoldFont",helvetica,arial,sans-serif;

したがって、helveticaへのフォールバックは機能しますが、が設定されているため、テキストは太字ではありませんfont-weight:normal。

さて、ここに問題があります：

  • 設定font-weight:boldすると、woffファイルを処理できるブラウザーは、woffファイルで定義したフォントを使用する代わりに、デフォルトのフォントにフォールバックします。
  • 設定font-weight:normalすると、woffファイルを処理できない古いブラウザはテキストを太字で印刷できなくなります。

私は何をすべきか？

4

1 に答える 1

2

次のことを試しましたか：同じフォントに複数のフォントファイルを追加する方法は？？

この@font-faceプロパティを使用すると、フォントを適用するスタイルを指定できます。

于 2012-11-19T11:13:12.297 に答える