如何在Windows上的CSS 3中更加stream畅地呈现精简的字体？
当我在Adobe Flash Pro CS6中devise我的网站时，字体如下所示：
字体看起来很平滑，稍微厚一点，当我创buildHTML和CSS来在浏览器中呈现字体时，它们分别出现在IE，Firefox和Chrome中。
在某些地区看起来更薄更像素化。 我在OS X上看到了更平滑的字体渲染。我怎样才能使这些浏览器中的字体显得更stream畅？ 我假设这是一个ClearType的问题，这看起来像这样的细字体可怕。
这里是我用来testing的代码，所以可以在发布前testing答案：
<html> <head> <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' /> </head> <body> <span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span> </body> </html> 你永远不会让网站在不同的浏览器或操作系统中看起来相同，他们使用不同的技术等等。
这是你不应该真正关心的 。 使用IE的人不会切换到Firefox或Chrome，反之亦然。 他们习惯于字体的样子，而不会注意到。
浏览器不一致是前端开发人员必须忍受的事情（可悲）。 如果他们都看起来一样，但是这不会发生
你可以尝试的东西，你可能需要不同的浏览器修复：
text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;
编辑1： DirectWrite现在在windows上，这将改善渲染的铬。
编辑2（2017）：系统UI字体
你可以尝试的另一件事是使用系统字体来改善用户体验。
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Readup – 粉碎杂志
Readup – booking.com
Readup – 中
text-rendering：optimizeLegibility将字距应用于字体，这可以提高可读性，但前提是显示和字体大小的分辨率足够高。 如果之前太薄，它不会使字体更大胆。
这里的问题可能是字体家族有一个或多个面比正常轻 （字体重量：400） – 像谷歌拉托一样。
如果你像这样把所有的光线加载到拉托的正常面上
@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);
我发现大多数Windows浏览器和Chrome OSX使用字体重量：100，如果你指定比400更轻的东西（或者普通的，常规的）。 虽然检查器工具坚持机器显示例如font-weight：200，但将字体重量：更改为200或300不会有任何不同。 这不是。
删除较轻的重量（在我的情况下是100）解决了这个问题，并且至less让我使用font-weight：200。 在浏览器中渲染并不完全相同，但至less相似。
@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);
这当然不能解决实际问题不能访问指定的光照字体重量。
就我所知，没有一个解决scheme。 这是多个修补程序实施，以适应每个浏览器，除了IE浏览器。 给这些镜头：
对于Chrome和其他任何使用webkit的浏览器：
-webkit-font-smoothing:antialiased !important;
把它放在你的HTML CSS中，或者放在你认为合适的元素上。 您还可以将其与以上一起添加：
text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
尝试使用不同的alpha值，但是应该保持阴影大小不变。
我不知道你可以做什么，但是这至less应该解决Chrome最大的问题（加上其他webkit浏览器）。
我发现在Google Chrome中，您可以添加-webkit-text-stoke来改善字体的外观。
例如：
-webkit-text-stroke: .025em rgba(51,51,51,0.50);
我在所有的网站上使用这个，它涵盖了大部分的字体渲染问题。
text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;
我认为这是一个比浏览器问题更多的Windows问题。 相同的浏览器在其他操作系统（如Linux或Mac）上也能够更加stream畅地呈现相同的字体。
在Chrome中，以及任何Webkit浏览器的扩展，您可以使用以下代码来平滑字体：
-webkit-font-smoothing: antialiased;
要么
-webkit-font-smoothing: antialiased !important;
通常情况下，我发现这并不是很多。 我认为我们只能等待微软做些什么。
您可以使用css属性文本渲染来解决这个问题。
例：
text-rendering: auto text-rendering: optimizeSpeed text-rendering: optimizeLegibility text-rendering: geometricPrecision text-rendering: inherit
你可能会想使用文本渲染：optimizeLegibilty。
更多信息在这里： MDN文本渲染
最近我碰到类似的问题，相同的字体家族和大小在Chrome浏览器，safari和Firefox上看起来不一样。 铬和Firefox看起来特别厚。 这可能不是最好的方式，但为我工作
-webkit-font-smoothing: antialiased; -moz-font-smoothing: unset; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;
此外，它值得一段时间结帐不同的渲染引擎。 CSS什么是-moz-和-webkit-？
