html设置字体为小型大写字母,css3 – OpenType小型大写的CSS回退

上次更新时间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,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博客文章中：

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