Small Caps不适用于Chrome上的Twitter Bootstrap

Question

我有这个非常简单的标记

<h1>
    <a href="#">
        My Title
    </a>
</h1>

和这个CSS

h1 {
   font-variant: small-caps;
}

此处呈现jsfiddle。

问题来自于使用Twitter Bootstrap。文本渲染时没有定义font-variant。

我确定Bootstrap是原因，因为当你删除它时，文本会按预期呈现。有什么想法或解决方法吗？

我正在Chrome 26.0.1410.64上尝试

Bootstrap ON

Bootstrap OFF

Answer 1

尝试设置：

text-rendering: auto;

这是一个更新的jsFiddle。 http://jsfiddle.net/XP9jQ/6/

问题出现是因为Twitter Bootstrap有这个规则：

h1, h2, h3, h4, h5, h6 { text-rendering: optimizelegibility; }.

text-rendering：optimizelegibility;由于某种原因，谷歌Chrome中的小型大写并不适合。

Answer 2

请参阅this thread。

虽然很奇怪，但问题实际上是 Chrome ，以及您将font-variant: small-caps;放在H#标记内的标记上。< / p>

显然，Chrome目前无法尊重small-caps个H#代码及其后代。{1}}请查看this update to your fiddle以了解我的意思。

您可能会更好地改变您的HTML，只需将<span>，<p>或<div>元素设置为在这种情况下看起来像<h1>元素 - 因为Chrome然后会尊重你的small-caps风格。

<强>更新

查看其他人的帖子 - 我注意到text-rendering: auto实际上迫使Chrome恢复正常渲染。 This update to the jsFiddle演示了此修复程序。归功于Martin的解决方法。

Answer 3

设置font-variant: small-caps几乎从不产生真正的小型上限。相反，它只是通过减少普通大写字母的大小，使浏览器使用假的小型大写字母。这可以看作例如在“Bootstrap OFF”屏幕截图中：“小型大写字母”的笔画宽度太小，仅仅是因为它们的字体大小与普通大写字母不同。

除了阻止某些浏览器使用虚假小型大写并且可能已经解决的技术问题之外，基本问题依然存在：你没有得到真正的小型大写字母。要获得它们，您需要一个包含小型大写字母的字体，一些额外的标记，一些高级CSS规则（如font-feature-settings），它们可以使用小型大写字母，以及一个支持这些CSS构造的现代浏览器。人们计算机中常见的大多数字体都没有真正的小型上限。

士气是：使用其他印刷设备而不是小型盖帽。