9

我有这个非常简单的标记

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

这个CSS

h1 {
   font-variant: small-caps;
}

在这里，它在jsfiddle上呈现。

问题来自使用 Twitter Bootstrap。文本呈现为没有font-variant定义。

我确信 Bootstrap 是原因，因为当您删除它时，文本会按预期呈现。对此有任何想法或解决方法吗？

我正在 Chrome 26.0.1410.64 上尝试

引导开启

引导开启

引导关闭

在此处输入图像描述

4

3 回答 3

19

尝试设置：

text-rendering: auto;

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

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

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

文本渲染：优化易读性；由于某种原因，Google Chrome 中的小型大写字母不能很好地发挥作用。

于 2013-05-16T18:51:17.033 回答
6

看到这个线程。

奇怪的是，问题实际上是Chrome，并且您将其font-variant: small-caps;放在位于标签内的H#标签上。

显然，Chrome 目前无法兑现标签及其后代small-caps。H#请查看您的小提琴的此更新以了解我的意思。

在这种情况下，您可能会更幸运地将 HTML 更改为简单地设置 a 、 或元素的样式<span>，<p>使其<div>看起来像一个<h1>元素 - 因为 Chrome 会遵循您的small-caps样式。

更新：

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

于 2013-05-16T18:53:30.260 回答
3

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

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

士气是：使用其他印刷设备而不是小型大写字母。

于 2013-05-16T19:41:31.913 回答