如何在Windows的CSS 3中更加流畅地呈现精简的字体？ [英] How to render thin fonts more smoothly in CSS 3 on Windows?
问题描述
当我在Adobe Flash Pro CS6中设计我的网站时，字体如下所示：
字体看起来很平滑，稍微厚一点，当我创建HTML和CSS在浏览器中呈现字体，它们分别在IE，Firefox和Chrome中显示。
$ b
在某些区域看起来更薄更像素化。我在OS X上看到了更平滑的字体渲染。我怎样才能使这些浏览器中的字体显得更流畅？我假设这是一个ClearType的问题，这看起来像这样的细字体可怕。
这是我用来测试的代码，所以答案可以在发布之前进行测试：
< html>
< head>
< link href ='http：//fonts.googleapis.com/css？family = Lato：300'rel ='stylesheet'type ='text / css'/>
< / head>
< body>
< / 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：
编辑2（ ） 2017）：系统UI字体
您可以尝试的另一件事是使用系统字体来改进UX。 b
$ b
font-family：-apple-system，BlinkMacSystemFont，Segoe UI，Roboto，Oxygen，Ubuntu CantarellFira SansDroid SansHelvetica Neue无衬线：//www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/rel =nofollow noreferrer> Readup - smashingmagazine
Readup - booking.com
阅读 - 中等
When I've designed my web site in Adobe Flash Pro CS6, the font looks like this:
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.
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.
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;
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", "Helvetica Neue", sans-serif;
Readup - smashingmagazine
Readup - booking.com
Readup - medium
这篇关于如何在Windows的CSS 3中更加流畅地呈现精简的字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
