Question

如何添加小型大写字体作为变体？

我正在使用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");
}

相关： How to add multiple font files for the same font? 和 Properly defining font-family in @font-face CSS rules 。

Answer 1

不幸的是，似乎有效的方法是将小型大写字体伪造为字体系列，并用例如声明它。

@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;时。这很难过，但并不令人感到意外。

奇怪的是，当我只设置font-family: Fontin时，Firefox和Opera，而不是Chrome，使用Fontin的小型字体。如果我删除具有@font-face的{{1}}规则，则不会发生这种情况。因此，浏览器对使用小型大写字母的逻辑方式非常不利。

使用@ font-face定义小型大写字体变体

1 个答案: