相同的字体除了粗细在不同浏览器上看起来不同

发布于 2024-10-18 09:45:37 字数 744 浏览 1 评论 0原文

文本在 Chrome 中正确显示。我希望它在所有浏览器中都以这种方式显示。我该怎么做？

我可以在 Safari 中使用 -webkit-font-smoothing: antialiased;

Chrome 修复此问题：
Chrome

火狐浏览器：
Firefox

h1 {
  font-family: Georgia;
  font-weight: normal;
  font-size: 16pt;
  color: #444444;
  -webkit-font-smoothing: antialiased;
}

<h1>Hi, my name</h1>

还有一个 JSFiddle： http://jsfiddle.net/jnxQ8/1/

原文

The text is correctly displayed in Chrome. I want it to display this way in all browsers. How can I do this?

I was able to fix this in Safari with -webkit-font-smoothing: antialiased;

Chrome:
Chrome

Firefox:
Firefox

h1 {
  font-family: Georgia;
  font-weight: normal;
  font-size: 16pt;
  color: #444444;
  -webkit-font-smoothing: antialiased;
}

<h1>Hi, my name</h1>

And a JSFiddle: http://jsfiddle.net/jnxQ8/1/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巾帼英雄 2024-10-25 09:45:37

确保所有浏览器的字体都相同。如果是相同的字体，那么使用跨浏览器CSS就无法解决该问题。

因为每个浏览器都有自己的字体渲染引擎，所以它们都是不同的。它们在更高版本中或在不同操作系统中也可能有所不同。

更新：对于那些不了解浏览器和操作系统字体渲染差异的人，阅读此内容和此内容。

然而，大多数人甚至都没有注意到这种差异，并且用户也接受了这一点。忘记像素完美的跨浏览器设计，除非您：

尝试通过 CSS 关闭子像素渲染（并非所有浏览器都允许这样做，并且文本可能很难看......）
使用图像（资源要求高且难以维护）
替换Flash（需要一些编程并且在iOS上不起作用）

更新：我检查了示例页面。通过文本渲染调整字距调整应该有所帮助：

text-rendering: optimizeLegibility;

更多参考：

部分字体渲染由 font-smoothing （如上所述），另一部分是 文本渲染。调整这些属性可能会有所帮助，因为它们的默认值在不同浏览器中并不相同。
对于 Chrome，如果仍然无法显示“OK”，请尝试此文本阴影黑客。它应该可以改善您的 Chrome 字体渲染，尤其是在 Windows 中。然而，text-shadow 在 Windows XP 下会变得疯狂。当心。

Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.

Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.

UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.

However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:

Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
Using images (resources are demanding and hard to maintain)
Replacing Flash (need some programming and doesn't work on iOS)

UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:

text-rendering: optimizeLegibility;

More references here:

Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.

回复收藏 0 原文

败给现实 2024-10-25 09:45:37

为了最好地标准化跨浏览器的 @font-face 嵌入字体，请尝试在 @font-face 声明或正文字体样式中包含以下内容：

speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

目前，似乎没有跨所有平台和浏览器版本的通用修复程序。正如经常提到的，所有浏览器/操作系统都有不同的文本渲染引擎。

In order to best standardise your @font-face embedded fonts across browsers try including the below inside your @font-face declaration or on your body font styling:

speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

At present there looks to be no universal fix across all platforms and browser builds. As stated frequently all browsers/OS have different text rendering engines.

回复收藏 0 原文

染柒℉ 2024-10-25 09:45:37

这里有一些关于此的重要信息：
https://bugzilla.mozilla.org/show_bug.cgi?id=857142

仍在试验，但到目前为止仅针对 FF 的微创解决方案是：

body {
-moz-osx-font-smoothing: grayscale;
}

There's some great information about this here:
https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Still experimenting but so far a minimally invasive solution, aimed only at FF is:

body {
-moz-osx-font-smoothing: grayscale;
}

回复收藏 0 原文

撞了怀 2024-10-25 09:45:37

尝试 -webkit-font-smoothing: subpixel-antialiased;

回复收藏 0 原文

天暗了我发光 2024-10-25 09:45:37

我收集并测试了讨论的解决方案：

Windows10 Prof x64：

* FireFox v.56.0 x32 
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit

macOs X Serra v.10.12.6 Mac mini（2010年中）：

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

Semi（在Safari中仍然微胖）解决了胖字体：

text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac

没有视觉效果

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

错误的视觉效果：

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

不要忘记测试时设置 !important 或确保您的样式未被覆盖

I collected and tested discussed solutions:

Windows10 Prof x64:

* FireFox v.56.0 x32 
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit

macOs X Serra v.10.12.6 Mac mini (Mid 2010):

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

Semi (still micro fat in Safari) solved fatty fonts:

text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac

Have no visual effect

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

Wrong visual effect:

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

do not forget to set !important when testing or be sure that your style is not overridden

回复收藏 0 原文

雾里花 2024-10-25 09:45:37

我有很多网站都有这个问题& 终于找到了解决方法，解决了 Firefox 字体比 Chrome 字体更粗的问题。

您需要在 -webkit 修复旁边添加此行 -moz-osx-font-smoothing: Grayscale;

body{
    text-rendering: optimizeLegibility;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

I have many sites with this issue & finally found a fix to firefox fonts being thicker than chrome.

You need this line next to your -webkit fix -moz-osx-font-smoothing: grayscale;

body{
    text-rendering: optimizeLegibility;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

回复收藏 0 原文