css - 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

Answer 1

尝试设置:

text-rendering: auto;

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

问题的出现是因为 Twitter Bootstrap 有这样一条规则:

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

文本渲染:优化易读性；由于某些原因，在 Google Chrome 中不能很好地使用小型大写字母。