Html 如何在 Windows 上的 CSS 3 中更流畅地渲染细字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22769474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to render thin fonts more smoothly in CSS 3 on Windows?
提问by Phoenix Logan
When I've designed my web site in Adobe Flash Pro CS6, the font looks like this:
当我在 Adobe Flash Pro CS6 中设计我的网站时，字体如下所示：
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.
字体看起来很流畅，稍微粗了点，当我创建HTML和CSS在浏览器中渲染字体时，它分别在IE、Firefox和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.
它在某些区域显得更薄和像素化。我在 OS X 上看到了更流畅的字体渲染。如何使字体在这些浏览器中看起来更流畅？我假设这是 ClearType 的一个问题，它看起来像这样的细字体。
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>
回答by Rick Lancee
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.
这是你不应该真正关心的事情。使用 IE 的人不会切换到 Firefox 或 Chrome，反之亦然。他们习惯了字体的外观，不会注意到。
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 cantry, 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: DirectWriteis now on chrome for windows which willimprove the rendering.
编辑 1：DirectWrite现在在 Windows 的 chrome 上，这将改善渲染。
Edit 2 (2017): System UI fonts
编辑 2（2017）：系统 UI 字体
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;
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
Readup -
smashingmagazine Readup - booking.com
Readup - medium
回答by Alex Koch
text-rendering: optimizeLegibility applies kerning to the font, wich canimprove readability, but only if the resolution of the display and font-size is high enough. It doesn't make the font any bolder if it was too thin before.
text-rendering: optimizeLegibility 对字体应用字距调整，这可以提高可读性，但前提是显示分辨率和字体大小足够高。如果以前太薄，它不会使字体更粗。
The problem here could be font-families that have one or more faces that are lighterthan normal (font-weight:400) – like Googles Lato.
这里的问题可能是字体系列的一个或多个字体比正常字体更轻（字体粗细：400）——比如谷歌的 Lato。
If you load all light to regular faces of Lato like this
如果你像这样将所有光线加载到 Lato 的常规面孔上
@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);
I made the observation that most Windows browsers and Chrome OSX use font-weight:100 if you specify anything lighter than 400 – (or normal, regular). Changing the font-weight: to 200 or 300 doesn't render any different, although the inspector tools insist the machine is displaying e.g. font-weight:200. Which it isn't.
我观察到大多数 Windows 浏览器和 Chrome OSX 使用 font-weight:100，如果你指定任何小于 400 的东西 - （或正常，常规）。将 font-weight: 更改为 200 或 300 不会呈现任何不同，尽管检查器工具坚持机器正在显示例如 font-weight:200。它不是。
Removing the lighter weights (100 in my case) solves the problem, and lets me at least use font-weight:200, respectively. Rendering isn't absolutely identical across browsers but similar at least.
删除较轻的权重（在我的情况下为 100）解决了问题，并且至少让我分别使用 font-weight:200。不同浏览器的渲染并不完全相同，但至少是相似的。
@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);
This of course doesn't solve the actual problem not being able to access light font weights as specified.
这当然不能解决无法按指定访问轻字体权重的实际问题。
回答by Hiigaran
There's no single fix for this, as far as I'm aware. It's multiple fixes implemented to suit each browser, except IE. Give these a shot:
据我所知，没有单一的解决方法。除了 IE，它针对每个浏览器实施了多个修复程序。试一试：
For Chrome, and any other browser using webkit:
对于 Chrome 和任何其他使用 webkit 的浏览器：
-webkit-font-smoothing:antialiased !important;
Place that in your html CSS, or for whatever elements you see fit. You can also add this along with the above:
把它放在你的 html CSS 中，或者放在你认为合适的任何元素中。您还可以将其与上述内容一起添加：
text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
Experiment with different alpha values, but you should keep the shadow sizes as they are.
尝试不同的 alpha 值，但您应该保持阴影大小不变。
I'm unaware of anything else you can do, but this should address the biggest problem with Chrome at the very least (plus other webkit browsers).
我不知道你还能做什么，但这至少应该解决 Chrome 的最大问题（以及其他 webkit 浏览器）。
回答by jono
I find that in Google Chrome you can add -webkit-text-stoke to improve the appearance of fonts.
我发现在谷歌浏览器中你可以添加 -webkit-text-stoke 来改善字体的外观。
for example:
例如：
-webkit-text-stroke: .025em rgba(51,51,51,0.50);
-webkit-text-stroke: .025em rgba(51,51,51,0.50);
回答by Cameron Brown
I think this is more a Windows problem than a browser problem. The same browsers render the same fonts much more smoothly on other operating systems such as Linux or Mac.
我认为这更像是 Windows 问题而不是浏览器问题。相同的浏览器在 Linux 或 Mac 等其他操作系统上更流畅地呈现相同的字体。
In Chrome, and by extension any webkit browser, you can use the following code to smooth your fonts:
在 Chrome 以及任何 webkit 浏览器中，您可以使用以下代码来平滑字体：
-webkit-font-smoothing: antialiased;
or
或者
-webkit-font-smoothing: antialiased !important;
Typically, I find that this doesn't do a whole lot. I think we'll just have to wait for Microsoft to do something about it.
通常，我发现这不会做很多事情。我认为我们只需要等待微软对此做些什么。
回答by Isaac Guan
I ran into a similar issue recently, same font family and size looked differently on Chrome, safari and Firefox. The chrome and firefox look especially thicker. This might not be the best way but worked for me
我最近遇到了类似的问题，相同的字体系列和大小在 Chrome、safari 和 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;
Also, its worth a while to checkout different rendering engines. CSS What are -moz- and -webkit-?
此外，值得花一些时间检查不同的渲染引擎。 CSS 什么是 -moz- 和 -webkit-？
回答by Tyrone
I use this on all sites and it covers most issues with font rendering.
我在所有网站上都使用它，它涵盖了字体渲染的大多数问题。
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
回答by Ryan Ausel
You may be able to fix this using the css property text-rendering.
您可以使用 css 属性 text-rendering 解决此问题。
Example:
例子：
text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit
You would probably want to use text-rendering:optimizeLegibilty.
您可能想要使用 text-rendering:optimizeLegibilty。
More information here: MDN Text-Rendering
更多信息：MDN 文本渲染
回答by Luke Robertson
Im going to prefix this with its a hack and i dont like it, but it works
我要用它的 hack 作为前缀，我不喜欢它，但它有效
transform: rotate(-0.0002deg)
It makes fonts noticeably smooth, albeit slightly thinner
它使字体明显平滑，尽管略薄
回答by Abdullah
It's late but did you ever try hint the font files? Go transfonter site and upload your font files. Then the options area check the auto hint option.
已经晚了，但你有没有尝试过提示字体文件？转到 transfonter 站点并上传您的字体文件。然后选项区域检查自动提示选项。
