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

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");
}

相关:如何为同一字体添加多个字体文件？并在@ font-face CSS规则中正确定义font-family.

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;.这很难过,但并不令人惊讶.

奇怪的是Firefox和Opera,但不是Chrome,在我设置时使用Fontin的小型字体font-family: Fontin.如果我删除具有的@font-face规则,则不会发生这种情况font-style: small-caps.所以浏览器对使用小型大写字母的逻辑方式非常不利.