OpenType 小型大写字母的 CSS 回退

Question

我在一个小型大写字母很重要的网站上工作:设置圣经的文本。在旧约中，上帝的名字被音译为Lord但在小盘股中——不是 LORD .但是，目前 OpenType 小型大写字母支持的状态……不是最佳状态。 Safari(甚至通过 Yosemite 上的 Safari 8，我正在输入此内容)仍然不支持 -webkit-font-feature-settings: 'smcp'选项，并且该网站的很多点击量都将来自移动设备。

不幸的是，“优雅降级”在这里是有问题的:如果您同时指定 font-variant: small-caps和 font-feature-settings: 'smcp'在支持后者的浏览器(例如 Chrome)中，font-variant声明覆盖了它，所以丑陋的旧式版本仍然发挥作用。 (注意:按照 spec 应该是这样:font-variant 声明的优先级高于 font-feature-settings 声明)。鉴于 font-variant: small-caps 的当前实现，虽然 - 缩小的大写而不是实际的小写 - 结果是使用 font-variant: small-caps现实主义者不太优雅地降低了每个人的阅读体验。

过去，我将小型大写字母导出为不同的 webfont 并直接指定它们；见 this post举一个简单的例子:每段的第一行都是这样指定的。

虽然我可以在这里做同样的事情(至少理论上可以提供一个非常小的字体，因为我真的只需要三个字符: o 、 r 和 d )，我更喜欢简单地启用理智的回退。然而，如上所述，这是不可能的。我愿意但更愿意避免将服务器端解决方案(浏览器检测等)作为一个更好地最小化的复杂点，尤其是考虑到浏览器的变化如此之快。还有什么办法可以解决这个问题，尤其是有没有现有的解决方案？

编辑:根据评论澄清—— future ，font-variant: small-caps将很好地处理这个问题，根据规范，如果字体提供它，它应该显示字体的小写字母变体。然而，目前，没有浏览器支持这个(至少，我找不到!)。这意味着相反，它们都只是通过缩小实际大写字母来呈现假小写字母。结果在排版上令人不快，并且在这个元素中是 Not Acceptable 。

Answer 1

最后更新 2016/02/28。
我花了相当多的时间研究这个问题并与它搏斗。
在尽我所能挖掘之后，现在的最佳解决方案是:@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+, 火狐
29+、Opera 23+、Android 4.4+、Safari 9+、Edge 12+、Android 版 Chrome
更新，2016/02/28:正如上面链接的图表将清楚地表明，所有
常青浏览器现在有 @supports支持。

font-feature-settings :Using Small Caps & Text Figures on the Web :
Chrome 、火狐、IE10+

这并不完美:因为 IE10/11 没有实现 @supports ，你错过了一个
浏览器。 ( 编辑，2015 年 9 月 31 日: IE 本身没有 @supports，但 Edge 12+
确实如此，而且应该越来越多地覆盖该网站的所有消费者用户。)
尽管如此，这会让你在那里的大部分方式，而且它应该是面向 future 的:这个
应该逐步完善网站。正常(不好，但功能正常)
同时显示小型大写字母，当浏览器最终获得
围绕 font-variant: small-caps 默认使用 OpenType 小型大写字母,
这将继续正常工作。这是“渐进式增强”，它会
适合大多数用途。 [2]
字体子集
正如问题中提到的，可以创建字体的子集
只包括小资本。这就是我在 myown website 上为小型股所做的工作;看到第一行的第一行
this post中的段落举个例子。
要实现这一点，您需要先设置字体的子集。你可以做
使用字体工具手动进行此操作，或者(更简单的方法)您可以使用 FontSquirrel 的
自定义子集工具在他们的 webfont generator 中. ( 注: 你
必须检查许可证并确认相关字体允许这样做
一种修改。见下文。)在网络字体生成器中，首先上传
要修改的文件。然后选择 专家 单选按钮。大部分的
您可以保持原样的设置；他们是很好的理智的默认值。中途
您会看到的页面 OpenType 展平 选项。在这里，只选择“Small Caps”。
运行发电机。结果将完全取代正常
带小写字母的小写字母。 [3]
在这种情况下，您可以简单地将样式应用于您想要的元素
小资本，例如:

.divine-name {
    font-family: 'my_typeface_smcp', 'my_typeface', serif;
}

这种方法的主要优点是一致性:该字体将
显示在所有浏览器上，回到 IE5.5，只要你提供它
正确使用 @font-face 所需的各种钩子(Hook).
但是，这种方法有一些缺点:

这意味着提供另一个字体文件。就我而言，这将是一个
可接受的小尺寸(因为我实际上只需要四个字符)，但它是
总的来说还是需要考虑的。在任何情况下，它都是另一个 HTTP
请求，这将进一步减慢页面加载时间或至少给
重新加载时，您会看到一些无样式的文本。

它可能会违反相关字体的许可。对于至少一个
我在这个元素中使用的字体中，它确实:明确的许可证
禁止使用 FontSquirrel 等工具重建字体。 (FontSquirrel 是
我之前用于这种方法的工具，效果很好。)这是
使用字体的子集完成任务的成败问题
目标。话虽如此，如果您有充分的理由这样做，您也许可以
从供应商那里获得支持(特别是如果他们是一家小商店)。为了
引发这个问题的元素，我能够用一个很好的方式做到这一点
电子邮件——设计师是个好人。

不这样做的另一个主要原因是它具有显着的
更高的维护成本。如果在任何时候您需要更改或更新
字体，您必须重新进行子集化过程。经过
相比之下，第一个选项只会起作用，尽管不可否认
正如人们所希望的那样愉快，不仅会继续工作，而且会
随着浏览器增加对 CSS3 的实现，实际上会随着时间的推移而改进
标准。

笔记

由于各种原因(特别是见下面的注释 2)，我实际上选择了
此处概述的第二种方法，这与我尝试使用的方法相同
避免。唉。

问题仍然存在:即使在最新的 Chrome 中(截至本次发布时为 38
编辑)，使用 font-feature-settings: 'smcp'方法有一些
问题。例如，如果您打开 letter-spacing (一个比较常见的
recommendation对于小型股)，小型股将恢复
到正常的小写字母。 Fixed in Chrome 48 . HT 接听者
below .

来自介绍该功能的 FontSquirrel 博客文章:

If you have a font with OpenType features, you can now flatten some ofthem 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 glyphswith the small cap variants, giving you a small cap font. Please note thatnot all OpenType features are supported and if the font lacks OpenTypefeatures, using these options won't create them.