css3 – OpenType小型大写的CSS回退

我花了相当多的时间研究这个并与之搏斗.
在尽可能地挖掘之后,现在的顶级解决方案是：

@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博客文章中：