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 规则中正确定义字体系列。

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;. 这很可悲，但并不令人惊讶。

奇怪的是，当我只设置font-family: Fontin. 如果我删除@font-face具有font-style: small-caps. 因此，浏览器对使用小写字母的逻辑方式非常敌对。

于 2013-01-25T23:13:56.553 回答