html5 – 如何在CSS 3中更平滑地渲染薄字体？

当我在Adobe Flash Pro CS6中设计我的网站时，字体看起来像这样：

字体看起来平滑和稍厚，当我创建HTML和CSS在浏览器中渲染字体时，它分别出现在IE，Firefox和Chrome中。

它在一些地区看起来更薄和像素化。我看到在OS X上更平滑的字体渲染。我如何使字体在这些浏览器更平滑？我假设这是ClearType的问题，它看起来像这样的薄字体可怕。

这里是我用来测试的代码，所以答案可以测试之前发布：

<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>

解决方法

你永远不会得到网站看起来相同在不同的浏览器或操作系统，他们使用不同的技术都有不同的意见，什么是更好的等等。

这是你不应该关心的事情，imho。使用IE的用户不会切换到Firefox或Chrome，反之亦然。它们用于字体看起来和不会注意到的方式。

关注真实问题，如前端性能，可用性，没有人会注意到浏览器之间的小字体差异 – 不接受我们的开发人员。

浏览器不一致是开发人员需要的前端。它的伟大，如果他们都看起来一样，但不会发生 – 不要让我开始浏览器兼容性，dropIE8-。

你可以使用“hacks”，但这只会膨胀你的CSS，因为你可能需要不同的修补程序不同的浏览器。

你可以尝试的事情：

text-shadow: 1px 1px 1px rgba(0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;

编辑：DirectWrite现在在Chrome的窗口，这将改善渲染。

原文地址：https://www.jb51.cc/html5/169519.html

html5 – 如何在CSS 3中更平滑地渲染薄字体？

解决方法

相关推荐