Css 相同的字体，除了它的重量在不同的浏览器上看起来不同

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

我能够在Safari中用

-webkit字体平滑：抗锯齿

铬：


Firefox:



h1{
字体系列：格鲁吉亚；
字体大小：正常；
字号：16pt；
颜色：#4444；
-webkit字体平滑：抗锯齿；
}
嗨，我的名字
我认为在屏幕上使用“点”表示字体大小不是个好主意。尝试在字体大小上使用px或em

发件人：

不要在pt中指定字体大小，
或者其他绝对长度单位。他们
跨平台渲染不一致
并且无法由用户代理调整大小
（例如浏览器）

确保所有浏览器的字体都相同。如果是同一字体，则使用跨浏览器CSS解决问题

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

更新：适用于不了解浏览器和操作系统字体呈现差异的用户，以及

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

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

更新：我查看了示例页面。通过文本呈现调整字距应有助于：

text-rendering: optimizeLegibility; 

更多参考资料如下：

字体呈现的一部分由（如上所述）控制，另一部分由。调整这些属性可能会有所帮助，因为它们的默认值在不同浏览器中并不相同
对于Chrome，如果仍然没有显示OK，请尝试此选项。它可以改善你的Chrome字体渲染，尤其是在Windows中。然而，在Windows XP下，文本阴影将变得疯狂。小心点
为了使@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;

目前看来，所有平台和浏览器版本都没有通用的修复程序。如前所述，所有浏览器/操作系统都有不同的文本呈现引擎
 这里有一些很好的信息：

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

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

尝试
文本渲染：几何精度

与
文本呈现不同：优化易读性
，它在缩放字体时会处理字距调整问题，而最后一个会启用字距调整和连字。
试试
-webkit字体平滑：亚像素抗锯齿
我收集并测试了讨论过的解决方案：

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中仍为微脂）解决脂肪字体：

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

别忘了设定！重要信息：在测试或确保您的样式未被覆盖时
我有很多网站都存在此问题&最终找到了一个解决方案修复firefox字体比chrome字体厚的问题

您需要在-webkit fix
-moz-osx字体平滑：灰度

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

一般来说，不同的浏览器都处理自己的文本呈现。如果你谷歌这个，你会看到很多关于浏览器渲染的结果。除非你的CSS中有什么奇怪的东西，否则你很有可能会受到每个相关浏览器的不同渲染引擎的摆布。我在Safari中用
-webkit字体平滑：抗锯齿现在是firefox吗？那不是css3吗？字体平滑？绝对是Chrome中的Webkit字体平滑声明。它只影响特定的字体，该网站在2010年发布了相关信息。我不明白为什么Chrome和Safari呈现方式不同：它们都基于WebKit。是的，但Chrome显然会自动应用`-WebKit字体平滑：抗锯齿；'而Safari没有？chrome和Safari很相似，但不是同一个浏览器：它们共享相同的基础、webkit，但许多特定于平台的组件和css模块是不同的——Safari比chrome支持更多的css3属性。字体渲染是非常特定于平台的。@ChrisW-Safari有自己的字体渲染引擎，可以提供与OSX类似的体验。因此“-webkit字体平滑”属性仅在Safari（在Windows下）上有效。还有一个变量是，你可以在浏览器首选项中修改抗锯齿。实际上，我在同一个站点的两个不同页面上遇到了一个问题，应用了相同的CSS，呈现了不同的结果。
字体平滑：抗锯齿为我创造了奇迹。但这与字体的粗体无关？粗体是由字体平滑（以及操作系统和浏览器渲染引擎的亚像素技术）控制的。在chrome上也是一样的，它从chrome 20开始，chrome 17的OKHow文本转换可以修复/破坏任何东西吗？
body{
    text-rendering: optimizeLegibility;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}