OpenType小型大写的CSS回退

Question

我正在一个小型帽子很重要的网站上工作:设置圣经的文本.在旧约圣经中,上帝的名字被音译为Lord但不是小的LORD.但是,目前OpenType小型大写支持的状态是......不是最优的.Safari(甚至通过优胜美地的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现实主义者不那么优雅地降低了每个人的阅读体验.

在过去,我已经将小型瓶盖作为独特的webfont导出并直接指定它们; 看一下这个帖子的一个简单例子:每个段落的第一行都是这样指定的.

虽然我可以在这里做同样的事情(至少在理论上可以提供一个非常小的字体,因为我真的只需要三个大字:o,r,和d),我只是喜欢让理智的回退.然而,如上所述,这是不可能的.我愿意接受,但非常希望避免使用服务器端解决方案(浏览器检测等)作为最小化的复杂点,特别是考虑到浏览器的变化速度.如何才能解决这个问题,尤其是现有的解决方案呢？

编辑:根据评论澄清 - 将来,font-variant: small-caps将很好地处理这个,根据规范,如果字体提供它应该显示字体的小型变体.但是,目前没有浏览器支持这一点(至少我没有找到!).这意味着相反,它们只是通过缩小实际资本来渲染虚假的小资本.结果是印刷上令人不愉快的,并且在这个项目上是不可接受的.

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:我可以使用功能查询吗？:Chrome 31 +,Firefox 29 +,Opera 23 +,Android 4.4 +,Safari 9 +,Edge 12+,Chrome for Android

  更新,2016/02/28:正如上面链接的图表所示,所有 常绿浏览器现在都有@supports支持.

• font-feature-settings:在网络上使用小型大写字母和文字数字:Chrome,Firefox,IE10 +

这并不完美:由于IE10/11没有实现@supports,你错过了一个浏览器.(编辑,2015/09/31: IE本身没有@supports,但Edge 12+ 没有,而且这应该越来越多地覆盖网站的所有消费者用户.)尽管如此,这会让你大部分都在那里,它应该是面向未来:这应该逐步改善网站.同时显示正常(坏的,但功能性的)小型大写,并且当浏览器最终默认使用OpenType小型大写时font-variant: small-caps,这将继续正常工作.这是"渐进式增强",它可以很好地用于大多数目的.[2]

字体子集

正如问题所述,人们可以创建一个仅包含小型大写字体的字体子集.这就是我在自己网站上为小型公司所做的事情.见第一段第一行中的这篇文章中的例子.

要实现此目的,您需要从字体的子集开始.您可以使用字体工具手动执行此操作,或者(更简单的方法)您可以在其webfont生成器中使用FontSquirrel的自定义子集工具.(注意:您 必须检查许可证并确认相关字体允许进行此类修改.请参阅下文.)在Web字体生成器中,首先上载您要修改的文件.然后选择专家单选按钮.您可以保留大多数设置; 他们是理智的默认.在页面中间,您将看到OpenType Flattening选项.在这里,只选择"Small Caps".运行发电机.结果将完全替换正常的小写字母与小帽设置.[3]

在这种情况下,您可以简单地将样式应用于您想要拥有小型大写的元素,例如:

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

这种方法的主要优点是一致性:只要你使用所需的各种钩子正确地传递它,那么该字体将在每个浏览器上显示,返回到IE5.5 @font-face.

但是,这种方法有一些缺点:

1. 这意味着提供另一个字体文件.在我的情况下,这将是一个可接受的低尺寸(因为我实际上只需要四个字符),但它仍然需要考虑一般.它在任何情况下都是另一个HTTP请求,它会进一步减慢页面加载时间,或者至少在重新加载时给你一些无格式文本.

2. 它可能违反有关字体的许可证.对于我在此项目中使用的至少一种字体,它确实:许可证明确禁止使用FontSquirrel等工具重建字体.(FontSquirrel之前是我用于此方法的工具,它运行得很好.)这是使用字体子集来实现目标的成败问题.话虽如此,如果你有充分的理由这样做,你可能会得到供应商的支持(特别是如果他们是一个小商店).对于提出这个问题的项目,我能够通过一个漂亮的电子邮件做到这一点 - 设计师是一个伟大的人.

不这样做的另一个主要原因是它具有明显更高的维护成本.如果您在任何时候需要更改或更新字体,则必须重新进行子集化过程.相比之下,第一个选项只是工作,虽然不如人们所希望的那样令人愉快,并且不仅会继续工作,而且随着浏览器增加CSS3标准的实施,它们会随着时间的推移而实际改进.

笔记

1. 出于各种原因(特别参见下面的注释2),我实际上选择了这里概述的第二种方法,这与我试图避免的方法相同.唉.

2. 问题仍然存在:即使在最新的Chrome中(截至编辑时为38),使用该font-feature-settings: 'smcp'方法也存在一些问题.例如,如果你打开letter-spacing (对于小型大写的一个相当普遍的 建议),小型大写字母将恢复为正常的小写字母. 在Chrome 48中修复.HT回答 下面的问题.

3. 从介绍该功能的FontSquirrel博客文章中:

   如果您有一个具有OpenType功能的字体,您现在可以将其中的一些展平到您的webfont中.例如,某些字体内置了小型大写字母,但它们在Web浏览器中完全无法访问.通过选择"小帽"选项,Generator将使用小帽变体替换所有小写字形,为您提供小型字体.请注意,并非所有OpenType功能都受支持,如果字体缺少OpenType功能,则使用这些选项将不会创建它们.