OpenType小型大写的CSS回退

我正在一个小大写字母很重要的网站上工作：设置圣经的文本。在《旧约》中，上帝的名字被音译为

Lord

，但不是用大写字母

Lord

。然而，目前OpenType小型股支持的状态……不是最佳状态。Safari（即使是通过优胜美地上的Safari 8，我正在从中键入此内容）仍然不支持

-webkit字体功能设置：“smcp”

选项，并且此网站的许多点击量将来自移动设备

---

不幸的是，“优雅降级”在这里是有问题的：如果您在支持后者的浏览器（如Chrome）中同时指定

font variant:small caps

和

font功能设置：“smcp”

，则

font variant

声明会覆盖它，因此丑陋不堪的旧式版本仍然发挥作用。（注意：

字体变体

声明比

字体功能设置

声明具有更高的优先级）。鉴于

font-variant:small caps

的当前实施，尽管缩小了大写字母而不是实际的小写字母，但结果是使用

font-variant:small caps

现实主义者并没有如此优雅地降低每个人的阅读体验

在过去，我将小字体导出为一种独特的webfont，并直接指定它们；请参阅以获取一个简单的示例：每个段落的第一行都是这样指定的

虽然我可以在这里做同样的事情（至少在理论上可以提供一个非常小的字体，因为我实际上只需要三个字符：

o

，

r

，和

d

），但我更愿意简单地启用合理的回退。然而，如上所述，这是不可能的。我愿意接受，但我更愿意避免服务器端解决方案（浏览器检测等），因为这是一个复杂的问题，最好将其最小化，特别是考虑到浏览器的变化速度有多快。还有什么办法可以解决这个问题，尤其是现有的解决方案吗

---

编辑：根据未来的评论进行澄清，

字体变体：小大写

将很好地处理此问题，根据规范，如果字体提供，则应显示字体的小大写变体。然而，目前没有浏览器支持这一点（至少我找不到）。这意味着，它们都只是通过缩小实际大写字母来呈现假小大写字母。结果在印刷上令人不快，在这个项目上是不可接受的。

你已经在这里提到过了，很优雅的降级

使用字体功能设置，如果浏览器不支持opentype功能，则用户仍将收到所有内容，最坏情况是全大写字母；什么也没丢。我认为这是一种优雅的堕落

一个替代方案，您可能需要考虑使用Typogruby（），或类似的，或者手动添加一个类，您可以直接在HTML中使用该类，用CSS2伪造它，例如：

.caps {font-size: .83em; letter-spacing: .25em; text-transform: uppercase;}

---

编辑：当然，使用上面的方法，您还可以为.caps类指定不同的字体，一个具有完全大写的字体，在小字体下可以很好地代替真正的小大写。

暂时停止思考OpenType，思考一下内容：对于语义不同的数据，您需要不同的样式（在本例中，为一个特殊的宗教词设置小大写样式）这正是HTML标记发明的初衷。只需使用javascript将这些单词自动包装在

标记中，并让其类使用专用的小型大写字体。这非常容易做到，甚至可以让您找到与主文本字体无关的最佳套件小型大写字体

只需在每次加载DOM时运行一些代码（尤其是在完成整个内容之后，除非您只显示短段文本）：

函数wrapSmallcaps（元素）{
var content=element.innerHTML；
[“领主”].forEach（职能（任期）{
var搜索=新的RegExp（“W？”+术语+“W？”，“g”）；
content=content.replace（搜索，函数（a，b）{
返回a.替换（术语“+”术语+”）；
});
});
element.innerHTML=内容；
}

例：

我们可以通过尝试使用OpenType字体来解决这一问题，但是您将自己绑定到一种字体，而不是每种样式一种字体，这使得以后在发现更好的运行文本字体或小号字体，或者用户反馈提示您改进外观时，在不违反字体许可证的情况下很难改进外观。

（当然，这段代码对于任何浏览器来说都是通用的，因为IE8——对于人们实际使用的所有浏览器，都没有显示“不支持”甚至“部分支持”）

最新更新日期2016/02/28

我花了相当多的时间研究这一点，并与之斗争。 在尽我所能深入研究之后，目前的最佳解决方案是：

@支持

在浏览器中利用

@支持
规则。这是我最初的想法
已选择对此项目执行。[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
规则的支持非常相似：


@支持
：：Chrome 31+，Firefox
29+、Opera 23+、Android 4.4+、Safari 9+、Edge 12+、Android浏览器

更新，2016年2月28日：如上图所示，所有
evergreen浏览器现在有
@支持
支持


字体功能设置
：：
Chrome、Firefox、IE10+


.some-class {
    font-variant: small-caps;
}

@supports(font-feature-settings: 'smcp') {
    .some-class {
        font-variant: normal;
        font-feature-settings: 'smcp';
    }
}

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