使用@ font-face定义小写字体变体 [英] Defining small-caps font-variant with @font-face

问题描述

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

我使用Jos Buivenga的Fontin，它有小帽变体作为单独的字体而不是作为OpenType样式的功能。此CSS代码段在系列中正确定义了常规，粗体和斜体字体，但不是小帽。如何使这项工作？

  / *字体由Jos Buivenga（exljbris） - > www.exljbris.com * / 
 @ font-face {
 font-family：Fontin; 
 src：url（../ Fonts / Fontin-Regular.ttf）格式（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）格式（truetype）; 
} 
  

相关信息： 如何使用@ font-face 定义粗体，斜体和 在@ font-face CSS规则中正确定义字体族

。

解决方案

似乎有效的方法是伪造小字体字体作为字体家族，用

$声明它

  @ font- face {
 font-family：Fontin Small Caps; 
 src：url（Fontin-SmallCaps.ttf）format（truetype）; 
} 
  

（注意缺少 font-style 设置，默认为正常）并使用像

的规则

  p {font-family：Fontin Small Caps; } 
  

不设置 font-style / p>

使用逻辑方法测试，如问题所述，并使用 http://www.exljbris.com/fontin.html 我注意到Firefox，Chrome，Opera都应用假小帽（即大小减小的大写字母），当我设置 font-family：Fontin; font-variant：small-caps; 。这很可悲，但不是很奇怪。

奇怪的是，Firefox和Opera，但不是Chrome，使用Fontin的小帽子字体，当我只设置 font-family：Fontin 。如果我删除了 font-style：small-caps 的 @ font-face 因此，浏览器真的对使用小资本的逻辑方式很敌意。

How do I add a small-caps font as a variant?

I’m using Jos Buivenga’s Fontin, which has its small-caps variant as a seperate font rather than as an OpenType-style feature. This CSS snippet properly defines the regular, bold, and italic fonts in the family, but not the small-caps one. How can I make this work?

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

Related: How to define bold, italic using @font-face and Properly defining font-family in @font-face CSS rules.

解决方案

Unfortunately, it seems that the effective way is to fake the small-caps typeface as a font family, declaring it with e.g.

@font-face {
    font-family: "Fontin Small Caps";
    src: url(Fontin-SmallCaps.ttf) format("truetype");
}

(note the lack of font-style setting, defaulting it to normal) and using a rule like

p { font-family: Fontin Small Caps; }

without setting font-style.

Testing with the logical way, as described in the question, and using the .ttf font from http://www.exljbris.com/fontin.html I noticed that Firefox, Chrome, Opera all apply "fake small-caps" (i.e., uppercase letters in reduced size), when I set font-family: Fontin; font-variant: small-caps;. This is sad, but not very surprising.

The odd thing is that Firefox and Opera, but not Chrome, use the small-caps typeface of Fontin when I only set font-family: Fontin. This does not happen if I remove the @font-face rule that has font-style: small-caps. So the browsers are really hostile to the logical way using small capitals.

这篇关于使用@ font-face定义小写字体变体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！