不幸的是,“优雅降级”在这里是有问题的：如果您在支持后者的浏览器中指定font-variant：small-caps和font-feature-settings：’smcp'(例如Chrome),则font-variant声明会覆盖它,所以可怕的丑陋的旧式版本仍然发挥作用. (注意：这应该是每个spec：font-variant声明的优先级高于font-feature-settings声明).鉴于目前font-variant的实现：小型大写,虽然缩小的大写而不是实际的小型大写 – 结果是使用font-variant：小型大家现实主义者不那么优雅地降低了每个人的阅读体验.
在过去,我已经将小型瓶盖作为独特的webfont导出并直接指定它们;请参阅this post的一个简单示例：每个段落的第一行都是这样指定的.
虽然我可以在这里做同样的事情(至少在理论上可以提供一个非常小的字体,因为我真的只需要三个字符：o,r和d),我更喜欢简单地启用理智的后备.然而,如上所述,这是不可能的.我愿意接受,但非常希望避免使用服务器端解决方案(浏览器检测等)作为最小化的复杂点,特别是考虑到浏览器的变化速度.如何才能解决这个问题,尤其是现有的解决方案呢？
编辑：根据评论进行澄清 – 将来,font-variant：small-caps将很好地处理这个,根据规范,如果字体提供它应该显示字体的小型变体.但是,目前没有浏览器支持这一点(至少我没有找到！).这意味着相反,它们只是通过缩小实际资本来渲染虚假的小资本.结果是印刷上令人不快的,并且在这个项目上是不可接受的.
解决方法
我花了相当多的时间研究这个并与之搏斗.
在尽可能地挖掘之后,现在的顶级解决方案是：
@supports
利用浏览器中的@supports规则.这是我最初的
选择在这个项目上做.[1]您以这种方式使用规则：
.some-class {
font-variant: small-caps;
}
@supports(font-feature-settings: 'smcp') {
.some-class {
font-variant: normal;
font-feature-settings: 'smcp';
}
}
我通过省略前缀版本简化了;你需要添加
-webkit-和-moz-前缀使这个实际工作.更新,
2012/02/28：您不再需要-moz-前缀,这将有效
下一版本中的Safari(iOS 9.3和OS X Safari 9.1).
这有利于支持真正的小型股和
对@supports规则的支持非常相似：
> @supports：Can I Use Feature Queries?：Chrome 31,Firefox
29,Opera 23,Android 4.4,Safari 9,Edge 12,Chrome for Android
更新,2016/02/28：正如上面链接的图表将清楚地表明所有
常青浏览器现在支持@supports.
> font-feature-settings：Using Small Caps & Text Figures on the Web：
Chrome,Firefox,IE10
这并不完美：因为IE10 / 11没有实现@supports,所以你错过了一个
浏览器. (编辑,2015/09/31：IE本身没有@supports,但是Edge 12
是的,这应该越来越多地覆盖该网站的所有消费者用户.)
尽管如此,这会让你大部分时间都在那里,它应该是面向未来的：这个
应该逐步改善网站.正常(坏,但功能)
同时显示小型大写字母,当浏览器最终获得时
对于font-variant,默认使用OpenType小型大写：small-caps,
这将继续工作得很好.这是“渐进式增强”而且它会
适合大多数目的.[2]
字体子集
如问题所述,可以创建字体的子集
仅包括小型首都.这就是我在my
own website上为小型股做的事情;看到第一行的第一行
以this post中的一段为例.
要实现此目的,您需要从字体的子集开始.你可以做
这可以用字体工具手动,或者(更简单的方法)你可以使用FontSquirrel
webfont generator中的自定义子集工具.(注意：你
必须检查许可证并确认有问题的字体允许这样做
一种修改.请参阅下文.)在Web字体生成器中,首先上传
您要修改的文件.然后选择专家单选按钮.大部分的
您可以保持原样的设置;他们是理智的默认.中途下来
页面你会看到OpenType Flattening选项.在这里,只选择“Small Caps”.
运行发电机.结果将完全取代正常
带小帽的小写字母.[3]
在这种情况下,您只需将样式应用于您想要的元素即可
小资本,例如：
.divine-name {
font-family: 'my_typeface_smcp','my_typeface',serif;
}
这种方法的主要优点是一致性：字体是这样的
显示在每个浏览器上,返回到IE5.5,只要你提供它
正确使用@ font-face所需的各种钩子.
但是,这种方法有一些缺点：
>这意味着提供另一个字体文件.就我而言,这将是一个
可接受的低尺寸(因为我实际上只需要四个字符),但它是
仍然需要考虑一下.它无论如何都是另一种HTTP
请求,这将进一步减慢页面加载时间或至少给予
当你重新加载时,你会看到一些没有样式的文本.
>它可能违反有关字体的许可证.至少一个
我在这个项目中使用的字体,它确实：许可证明确
禁止使用FontSquirrel等工具重建字体. (FontSquirrel是
之前我用过这种方法的工具,它运行得很好.)这是
使用字体子集来实现的一个成败问题
目标.话虽这么说,如果你有充分的理由去做,你也许能够
获得供应商的支持(特别是如果他们是一家小商店).为了
提出这个问题的项目,我能够做到这一点很好
电子邮件 – 设计师是个好人.
不这样做的另一个主要原因是它具有显着性
维护成本更高.如果您在任何时候需要更改或更新
字体,你必须重新经历子集化过程.通过
相比之下,第一种选择只会起作用,但不可否认
一个人可能希望的愉快,不仅会继续工作,而且会工作
随着浏览器增加CSS3的实现,实际上会随着时间的推移而改进
标准.
笔记
>由于各种原因(特别参见下面的注释2),我实际上选择了
这里概述的第二种方法,这与我试图采用的方法相同
避免.唉.
>问题仍然存在：即使在最新的Chrome中(截至当时的38个)
编辑),使用font-feature-settings：’smcp’方法有一些
的问题.例如,如果你打开字母间距(一个相当常见的
recommendation小帽子,小帽子将恢复
正常的小写字母. Fixed in Chrome 48. HT回答者
below.
>从介绍该功能的FontSquirrel博客文章中：
If you have a font with OpenType features,you can now flatten some of them into your webfont. For instance,some fonts have small caps built in,but they are completely inaccessible in a web browser. By selecting the “Small Cap” option,the Generator will replace all the lowercase glyphs with the small cap variants,giving you a small cap font. Please note that not all OpenType features are supported and if the font lacks OpenType features,using these options won’t create them.
