☰

同じフォントに複数のフォントファイルを追加するにはどうすればいいですか? 質問する

tag-icon • tag-icon fonts css font-face
同じフォントに複数のフォントファイルを追加するにはどうすればいいですか? 質問する

私は@font-face CSS ルールの MDC ページですが、一つ分からないことがあります。太字、斜体、太字 + 斜体のファイルが別々にあります。 3 つのファイルすべてを 1 つのルールに埋め込むにはどうしたらよいでしょうか@font-face? たとえば、次のようなファイルがあるとします。

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

ブラウザは太字に使用するフォントを認識できません (そのファイルは DejaVuSansBold.ttf であるため)。そのため、おそらく望ましくないフォントがデフォルトになります。特定のフォントのさまざまなバリエーションをすべてブラウザに伝えるにはどうすればよいでしょうか。

ベストアンサー1

解決策としては、複数の@font-faceルールを追加することが考えられます。たとえば、次のようになります。

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

ちなみに、Google Chrome はこのformat("ttf")引数を認識しないようですから、これをスキップした方が良いかもしれません。

（この答えはCSS2 の仕様。CSS3カンマ区切りのリストではなく、1 つのフォント スタイルのみが許可されます。

おすすめ記事