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; }.

文本呈现:optimizelegibility; 出于某种原因,谷歌Chrome中的小型大写并不适合.

Answer 2

看到这个帖子.

虽然很奇怪,但问题实际上是Chrome,而且你正在放置font-variant: small-caps;一个位于H#标签内的标签.

显然,Chrome是无法兑现small-caps的H#,此时标签和他们的后代.请看看这个更新你的小提琴,看看我的意思.

在这种情况下,您可能会更好地改变HTML以简单地将a <span>,<p>或<div>元素设置为<h1>元素 - 因为Chrome会尊重您的small-caps风格.

更新:

看到其他人的帖子 - 我注意到text-rendering: auto实际上迫使Chrome恢复正常渲染.对jsFiddle的此更新演示了此修复程序.感谢马丁的解决方法.