首页 文章

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

提问于
浏览 次
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");
}

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

css font-face

1 回答

  • 8

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

    @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 .

    使用逻辑方式进行测试，如问题中所述，并使用_2839211中的.ttf字体，我注意到Firefox，Chrome，Opera都应用“假小盘”（即缩小尺寸的大写字母），当我设置 font-family: Fontin; font-variant: small-caps; 时 . 这很难过，但并不令人惊讶 .

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

    回复于

相关问题