字体变体：小型大写；使用 Chrome 或 Firefox 显示不同的字体大小答案

【问题标题】：font-variant: small-caps; shows different font sizes using Chrome or Firefox字体变体：小型大写；使用 Chrome 或 Firefox 显示不同的字体大小
【发布时间】：2011-11-27 04:57:28
【问题描述】：

font-variant: small-caps;
font-size: 12px;

火狐：

大写字母：12px
小写字母：10px

铬：

大写字母：12px
小写字母：8px

如何在不使用 JavaScript 的情况下协调它？

【问题讨论】：

一种方法是使用提供小型大写字母变体的字体系列。除非您使用这样的字体，否则您将不得不处理浏览器自己关于小型大写字母应该意味着什么的概念，因为它会自行缩小大写字母。
另外，一旦你开始使用假大写字母，不要在大写字母周围放置“全尺寸”跨度，在小写字母周围放置“小尺寸”跨度。空格、标点符号和其他符号应保持原尺寸。
似乎这个问题变得更深了，我最近将我的网站移动到另一台服务器，Chrome 根据提供文件的服务器显示不同大小的小写字母。一个是带有 XAMPP 的 Windows 7，另一个是带有 LAMP 架构的 Ubuntu。 Windows 服务器显示的小写字母比 Linux 版本大 1px。

标签： css firefox google-chrome fonts text-rendering

【解决方案1】：

Webkit 浏览器显示的小型大写字母比其他浏览器要小，因此.. 您可以使用 CSS 媒体查询轻松嗅出 Chrome 和 Safari 等 Webkit 浏览器。试试这样的：

@media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
    font-size: .85em 
 }
}

【讨论】：

【解决方案2】：

您可以使用这样的 css hack 单独定位浏览器：

@-moz-document url-prefix() {
  //firefox specific css here
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  //chrome specific css here - this will also hit other webkit browsers like safari tho
}

但在我看来，一个更好的方法是使用一点点 javascript 来检测浏览器并在 html 元素上设置一个类，然后您可以使用该类作为定位各个浏览器的基础。

最终它看起来像这样：

<html class="firefox">
...
</html>

.firefox .rulename {
  //firefox specific css here
}

当然也同样适用于 chrome 和其他浏览器

【讨论】：

谢谢，但问题是找到更好的方法来修复字体大小，而不是如何检测浏览器:)
这是更好的方法，因为没有其他方法:)
我说的是字体变体的渲染（小写字母与大写字母的大小比例），而不是字体大小。我应该停止使用 font-variant 并为每个大写字母添加一个吗？
好吧，这听起来不是一个好的解决方案，但是字体在所有浏览器中的呈现方式都不同，并且总是如此。用户已经习惯了，而且，由于大多数用户从不使用一个以上的浏览器访问网站，所以没有人注意到..如果我是你，请忽略它...抱歉，我帮不上忙。
@SimonSteinberger：实际上并非如此，但它对此的看法与 OP 不同，原因是 OP 想要的东西没有解决方案。顺便说一句，在提出问题 4 年后，今天仍然没有，将来也不会，因为，正如我试图解释的那样，这与最终用户无关，因此与开发浏览器。

【解决方案3】：

我遇到了类似的问题，iPad 上的 Safari 与桌面上的 Safari 之间存在一个更奇怪的问题，显示 16 像素的小型大写字母的比例不同。出于某种原因，小型股在 iPad 上的尺寸更大，与 Firefox 相当。

调整字体大小或将字母间距减少半个像素左右，可以缓解问题，而无需进一步的额外修改。通过本质上找到一个在一个浏览器上触发但在另一个浏览器上不触发的微小中间调整，以尝试尽可能接近。

我对 Firefox 和 IE 的观察是，字体的缩放比例往往比 Webkit 多得多。比如在 IE 和 Firefox 中，15.6px 比 15.5px 稍微大一点或者使用更多的跟踪来调整，15.7px、15.8px 等也是如此。几乎每 0.1 个像素都有差异。而在 Safari 中，只有每 0.4 像素左右才能感知到差异。

对于我在此处造成溢出问题的小型大写字母案例，我使用了 15.5px，这与 Safari（桌面）上的 16px 几乎没有区别，但将 IE 和 Firefox 的小型大写字母尺寸尽可能降低到Safari 的。

【讨论】：