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声明就会覆盖它，所以可怕的、丑陋的旧式版本仍然起作用。(注意:这是等级库应该做的：font-variant声明比font-feature-settings声明具有更高的优先级)。考虑到当前font-variant: small-caps的实现，尽管缩减了大写而不是实际的小大写，结果就是在不太优雅地降低每个人的阅读体验的情况下使用font-variant: small-caps现实主义者。

在过去，我已经导出了小型大写作为一个独特的网页字体，并直接指定它们；参见这个职位的一个简单的例子:每一段的第一行是这样指定的。

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

编辑:基于注释的澄清--在将来，font-variant: small-caps将很好地处理这个问题，按照规范，如果字体提供它，它应该显示字体的一个小大写变体。但是，目前还没有浏览器支持这一点(至少，我找不到！)。这意味着，它们都只是通过缩减实际资本来制造假的小资本。在这个项目上，结果是不愉快的，也是不可接受的。

Answer 1

对font-feature-settings:"smcp"的支持在最近的浏览器中得到了改进。Chrome 48修复字母间距错误。根据caniuse.com的说法，iOS和桌面即将推出的Safari版本将支持它。但是，-webkit仍然需要前缀版本。

Answer 2

你已经在这里提过了，优雅的堕落。

使用字体功能设置，如果浏览器不支持opentype功能，那么用户仍将收到所有内容，最坏的情况是全尺寸大写；没有丢失任何内容。我认为这是一种优雅的贬低。

Aa您可能需要考虑使用Typogruby (http://avdgaag.github.io/typogruby/)或类似的方法，或者手动向该单词添加一个类，您可以在html中直接针对这个类，例如：

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

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

Answer 3

暂时停止思考OpenType，思考一下内容:对于语义不同的数据需要不同的样式(在本例中，是针对一个特殊的宗教词的小大写样式)，这就是HTML标记的真正目的。只要用javascript将这些单词自动包装在<span class="smallcapped">标记中，它的类就会使用专用的小头字体。这是非常容易做到的，甚至可以让您找到最好的套件小盖看起来独立于主文本字体。

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

function wrapSmallcaps(element) {
  var content = element.innerHTML;
  ["LORD"].forEach(function(term) {
    var search = new RegExp("    W?"+term+"  W?",'g');
    content = content.replace(search, function(a,b) {
      return a.replace(term, "<span class='smallcapped'>"+term+"</span>");
    });
  });
  element.innerHTML = content;
}

例：http://jsbin.com/cowumaxe/1/edit

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

(当然，这段代码对于任何浏览器都是通用的，因为IE8 - http://caniuse.com/#search=queryselector对所有实际使用的浏览器显示零“不支持”甚至“部分支持”)