font-variant:small-caps 在 IE 和 Firefox 上工作正常，在 Safari、Opera 和 Chrome 上看起来模糊答案

【问题标题】：font-variant:small-caps works ok on IE and Firefox, looks blurry on Safari, Opera and Chromefont-variant:small-caps 在 IE 和 Firefox 上工作正常，在 Safari、Opera 和 Chrome 上看起来模糊
【发布时间】：2012-06-27 18:07:04
【问题描述】：

我页面上的文字在 Safari、Opera 和 Chrome 上看起来很模糊：http://testowa.portalo.pl/wiadomosci.php

我正在使用这样的 CSS：

.tytulmalykom {
    color:#666666;
    font-size:11px;
    font-variant:small-caps;
}

在 Firefox 和 Internet Explorer 上运行正常。有其他选择吗？

【问题讨论】：

您的页面在 Safari 中看起来不错。
看看有什么不同：dodajfotke.pl/images/ol6yg29c.jpg我正在使用 Tahoma、Verdana、Helvetica、sans-serif；
您的屏幕显示带/不带明文的文本可能有问题吗？页面在这里看起来很清晰。在 Chrome 和 Safari 中。另外，尝试将其设为12px。
它没有帮助。唯一的解决方案是对 Opera/Safari/Chrome 使用 text-transform:uppercase;

标签： google-chrome css safari opera

【解决方案1】：

大多数字体缺少小型大写字体，因此font-variant:small-caps 使浏览器生成假的小型大写字母。他们通过转换为大写字母并减小字体大小来做到这一点。根据字体、浏览器、显示设备和其他因素，结果从可容忍到糟糕不等。除此之外，不同的浏览器会在此处应用不同的大小缩减。

因此，您可以通过自己进行大小写转换和字体缩小来获得更一致的结果。如果文本是大小写混合的，它会变得很笨拙，因为要以小写字母呈现“Foo”以保留大小写区别，您需要使用F<span class="sc">oo</span>（并在.sc 上设置text-transform: uppercase 和font-size: ...） .结果在印刷上不会很好；你需要一个由印刷师设计的小型大写字体。但至少你有可能在不同的浏览器上获得相同的字体大小减少。（不能保证，因为在应用字体大小方面存在细微差别。）

【讨论】：