字体参数:小型大写字母;显示不同的字体大小使用Chrome或Firefox

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

Firefox:

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

Chrome:

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

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

Webkit浏览器显示的小写字母比其他浏览器小，所以…您可以使用CSS媒体查询来轻松嗅出webkit浏览器，如Chrome和Safari。试试这样做:

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

您可以使用如下的css技巧来单独针对浏览器:

@-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和其他浏览器也是一样的

我也遇到过类似的问题，iPad上的Safari和台式机上的Safari有一个更奇怪的问题，显示16px的小大写字体的比例不同。由于某些原因，ipad上的小大写字体更大，有点像Firefox。

调整字体大小或字母间距半像素左右，可以缓解问题，而无需进一步的攻击。通过寻找一个微小的中间调整，在一个浏览器上触发，而不是在另一个浏览器上，尝试尽可能接近。

我在Firefox和IE中观察到的是，比起Webkit，它们的字体倾向于缩放更多的中间大小。例如，在IE和Firefox中，15.6px比15.5px稍微大一点，或者使用更多的跟踪来调整，15.7px、15.8px等也是如此。几乎每0.1像素就有一个差别。而在Safari中，每隔0.4px左右才会感觉到差异。

对于我的小大写案例，这里产生了溢出问题，我使用了15.5px，这与Safari(桌面)上的16px几乎没有区别，但将IE和Firefox的小大写大小降低到尽可能接近Safari的

相关内容

最新更新

热门标签：