5

スモール キャップス フォントをバリアントとして追加するにはどうすればよいですか?

私は Jos Buivenga の Fontin を使用しています。これは、OpenType スタイルの機能としてではなく、別のフォントとしてスモール キャップのバリアントを持っています。この CSS スニペットは、ファミリ内の標準、太字、およびイタリック フォントを適切に定義しますが、スモール キャップのフォントは定義しません。どうすればこれを機能させることができますか？

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
    font-family: "Fontin";
    src: url(../Fonts/Fontin-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Fontin";
    font-style: italic;
    src: url(../Fonts/Fontin-Italic.ttf) format("truetype");
}

@font-face {
    font-family: "Fontin";
    font-weight: bold;
    src: url(../Fonts/Fontin-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Fontin";
    font-variant: small-caps;
    src: url(../Fonts/Fontin-SmallCaps.ttf) format("truetype");
}

関連:同じフォントに複数のフォント ファイルを追加するには? @font-face CSS rules で font-familyを適切に定義する。

4

1 に答える 1

9

残念ながら、効果的な方法は、スモールキャップス書体をフォントファミリとして偽造し、たとえば次のように宣言することです。

@font-face {
    font-family: "Fontin Small Caps";
    src: url(Fontin-SmallCaps.ttf) format("truetype");
}

（font-style設定が不足していることに注意してください。デフォルトではnormal）そして次のようなルールを使用します

p { font-family: Fontin Small Caps; }

設定せずにfont-style。

質問で説明されているように、論理的な方法でテストし、 http：//www.exljbris.com/fontin.htmlの.ttfフォントを使用して、Firefox、Chrome、Operaがすべて「偽のスモールキャピタル」を適用していることに気付きました（つまり、 、縮小サイズの大文字）、設定した場合font-family: Fontin; font-variant: small-caps;。これは悲しいことですが、それほど驚くことではありません。

奇妙なことに、FirefoxとOperaは、Chromeではなく、設定した場合にのみFontinのスモールキャップス書体を使用しますfont-family: Fontin。@font-faceを含むルールを削除しても、これは発生しませんfont-style: small-caps。したがって、ブラウザはスモールキャピタルを使用する論理的な方法に対して本当に敵対的です。

于 2013-01-25T23:13:56.553 に答える