css – 小帽不适用于Chrome上的Twitter Bootstrap

我有这个非常简单的标记

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

和这个CSS

h1 {
   font-variant: small-caps;
}

这是在jsfiddle渲染.

问题来自于使用Twitter Bootstrap.文本呈现像没有定义的字体变体.

我确信Bootstrap是原因,因为当你删除它,文本按预期呈现.任何想法或解决办法吗？

我正在Chrome 26.0.1410.64尝试

启动引导

自举关

解决方法

尝试设置：

text-rendering: auto;

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

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

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

文本呈现：优化规范;由于某些原因,Google Chrome中的小帽子不能很好地运行.

原文地址：https://www.jb51.cc/css/214636.html