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

Question

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

6

如何添加一个小型大写字体变体？

我正在使用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规则中正确定义字体族。

- J. C. Salomon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

不幸的是，看起来模拟小型大写字体的有效方法是将其作为字体系列伪装，并使用例如声明

@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使用Fontin的小型大写字体，但Chrome不会，当我只设置font-family: Fontin时。如果我删除具有font-style: small-caps的@font-face规则，则不会发生这种情况。所以浏览器对使用小型大写的逻辑方式非常不友好。