如何在 Windows 上的 CSS 3 中更流畅地渲染细字体? [英] How to render thin fonts more smoothly in CSS 3 on Windows?
问题描述
当我在 Adobe Flash Pro CS6 中设计我的网站时，字体如下所示:
When I've designed my web site in Adobe Flash Pro CS6, the font looks like this:
字体看起来很流畅，稍微粗一些，当我创建HTML和CSS在浏览器中渲染字体时，分别在IE，Firefox和Chrome中显示.
The font looks smooth and slightly thicker, and when I create HTML and CSS to render the font in a browser, it appears like these, respectively in IE, Firefox, and Chrome.
它在某些区域显得更薄且像素化.我在 OS X 上看到了更流畅的字体渲染.如何使字体在这些浏览器中看起来更流畅?我假设这是 ClearType 的一个问题，它看起来像这样的细字体.
It appears thinner and pixelated in some areas. I've seen much smoother font rendering on OS X. How can I make the font appear smoother in these browsers? I'm assuming this is a problem with ClearType, which looks hideous with thin fonts like this one.
这是我用来测试的代码，因此可以在发布之前测试答案:
Here is the code I'm using to test, so answers can be tested before being posted:
<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>
推荐答案
你永远不会让网站在不同的浏览器或操作系统中看起来相同，它们使用不同的技术等.
You are never going to get sites to look the same in different browsers or operating systems, they are using different technologies etc etc.
这是您不应该真正关心的事情.使用 IE 的人不会切换到 Firefox 或 Chrome，反之亦然.他们习惯了字体的外观，不会注意到.
This is something you shouldn't really care about. People who use IE are not going to switch to Firefox or Chrome or vice versa. They are used to the way fonts look and are not going to notice.
浏览器不一致是前端开发人员不得不忍受的事情(遗憾的是).如果它们看起来都一样，那就太好了，但这不会发生
Browsers inconsistencies is a thing front end developers have to live with (sadly). Its great if they all look the same but that's not going to happen
您可以尝试的事情，您可能需要针对不同的浏览器进行不同的修复.:
Things you can try, you will probably need different fixes for different browsers.:
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
编辑 1:DirectWrite 现在在 chrome for windows 上将 改进渲染.
编辑 2 (2017):系统 UI 字体
您可以尝试的另一件事是使用系统字体来改进用户体验.
Edit 1: DirectWrite is now on chrome for windows which will improve the rendering.
Edit 2 (2017): System UI fonts
Another thing you can try is use system fonts for improved UX.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "HelveticaNeue", sans-serif;
阅读 - smashingmagazine
阅读-booking.com
阅读 - 中等
这篇关于如何在 Windows 上的 CSS 3 中更流畅地渲染细字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
