font-variant:small-caps; 使用Chrome或Firefox显示不同的字体大小

Mar*_*rin 8 css firefox fonts google-chrome text-rendering

font-variant: small-caps;
font-size: 12px;
Run Code Online (Sandbox Code Playgroud)

火狐:

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

铬:

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

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

Mar*_*sen 0

您可以使用 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
}
Run Code Online (Sandbox Code Playgroud)

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

最后它看起来像这样:

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

.firefox .rulename {
  //firefox specific css here
}
Run Code Online (Sandbox Code Playgroud)

当然对于 Chrome 和其他浏览器也是如此

  • 好吧,这听起来不是一个好的解决方案,但是字体在所有浏览器中的呈现方式都不同,并且始终如此。用户已经习惯了,而且说实话,因为大多数用户从来不会在多个浏览器中访问网站,所以没有人注意到..如果我是你,我会忽略它...抱歉,我帮不上忙。 (2认同)