css - 如何防止不同的浏览器通过@font-face 为单词添加更多宽度？

Question

见图片：

Mac 上的火狐：

Chrome 上的火狐：

在 chrome 上，您可以看到使用相同样式的相同字体占用更多空间。我该怎么做才能使所有浏览器都以相同的方式呈现字体，而不是为其添加更多宽度？

我正在使用具有 @font-face 属性的字体。

Answer 1

您忘记提及这两种情况中的哪一种是正确的字体渲染。

想到的几个想法：

既然你提到使用font-weight:600我会尝试用normal/bold（取决于你想要的结果）替换它并检查它是否有任何区别。如果字体文件不支持 600 的粗细，浏览器将继续自行解释它 - 有时它需要粗体，有时是正常的。

如果有问题的浏览器是 Chrome，您也可以尝试使用字体平滑 - 有时它有助于改善字体渲染：

-webkit-font-smoothing: none || antialiased || subpixel-antialiased

另外，我不确定您是如何实现的@font-face-如果您自己编写，我建议您通过@font-face诸如Fontsquirell之类的服务生成规则，因为它会生成跨浏览器兼容的代码，通常可以消除一些问题。

如需更多帮助，您需要使用更多数据来扩展您的问题 - 添加@font-face代码、字体名称并指定正确的字体渲染。糟糕的问题得到糟糕的答案。

Answer 2

不幸的是，对于每个浏览器呈现您选择的字体的方式，您无能为力。查看这篇文章，它解释了不同的浏览器和操作系统如何呈现不同类型的人脸文件：

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

与此同时，你可以做两件事。

1.) 可以使用的许多字体受这种渲染差异的影响要小得多。尝试使用与您正在使用的字体具有相同审美价值的不同字体，并尝试找到一种不仅适合您的印刷需求，而且在不同平台上的个人渲染之间的差异较小的字体。

2.) 创建一个脚本来感知用户的浏览器/操作系统，并使用该脚本进行font-weight相应的调整。

祝你好运。