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

Posted 2023-03-06

【中文标题】使用@font-face 定义小型大写字体变体

【英文标题】：Defining small-caps font-variant with @font-face

【发布时间】：2013-01-09 17:56:29

【问题描述】：

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

我正在使用 Jos Buivenga 的 Fontin，它的小型大写字母变体是一种单独的字体，而不是一种 OpenType 风格的功能。这个 CSS sn-p 正确定义了该系列中的常规、粗体和斜体字体，但没有定义小型大写字体。我怎样才能做到这一点？

/* 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。

【参考方案1】：

不幸的是，似乎有效的方法是将 small-caps 字体伪装成一个字体系列，用例如声明它

@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-style: small-caps 的@font-face 规则，则不会发生这种情况。所以浏览器对使用小写字母的逻辑方式非常敌视。

【讨论】：

重读@font-face的官方文档，看来你是对的：不支持font-variant。

@J.C.Salomon。对，根据 CSS3 字体草案，@font-face 中的 font-variant: small-caps 应该会影响所选字体（字体）的呈现，实际上是通过 OpenType 功能，而不是字体的选择。