如何在 CSS 中使字体清晰？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13627848/
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 make font sharp in CSS?
提问by learnmore
Hello everyone I'm trying to use sharp property like photoshop in Css but how can I do ?
大家好，我正在尝试在 CSS 中使用像 photoshop 这样的锐利属性，但我该怎么做？
Here is my css
这是我的 css
#login_text
{
position:absolute;
top:10px;
left:18px;
font-size:13pt;
font-weight:bold;
font-family:Arial;
}
回答by Ennui
In addition to the CSS3 text-renderingproperty AMK mentioned, there is also a Webkit (Chrome) specific hack for antialiasing: -webkit-font-smoothing: antialiased;(I believe the default value is subpixel-antialiased) which is nice to use since Webkit webfont rendering can be less than ideal on Windows machines in particular. A bit more info can be found here.
除了text-rendering提到的 CSS3属性 AMK 之外，还有一个 Webkit (Chrome) 特定的抗锯齿技巧：（-webkit-font-smoothing: antialiased;我相信默认值是subpixel-antialiased）这很好用，因为 Webkit webfont 渲染尤其在 Windows 机器上可能不太理想。 可以在此处找到更多信息。
There is also an old proposed font-smoothCSS3 property (see here) but as far as I know it is not implemented and doesn't do anything (at least not that I can see).
还有一个旧的建议font-smoothCSS3 属性（见这里）但据我所知它没有实现并且没有做任何事情（至少不是我能看到的）。
The sad reality is that you won't get Photoshop-quality font rendering on the web, especially not on a Windows machine. You can make up for this by choosing good webfonts and picking font sizes that naturally scale nicely, but there's only so much you can do.
可悲的现实是，您无法在网络上获得 Photoshop 质量的字体渲染，尤其是在 Windows 机器上。您可以通过选择好的网络字体并选择自然缩放的字体大小来弥补这一点，但您能做的只有这么多。
回答by Jeff Walters
Firefox 25 adds a new Mac-OS-only nonstandard property -moz-osx-font-smoothingequivilent to WebKit's -webkit-font-smoothing.
Firefox 25 添加了一个新的 Mac-OS-only 非标准属性-moz-osx-font-smoothing等效于 WebKit 的 -webkit-font-smoothing。
element {
元素 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
回答by A.M.K
While there is no "sharp" value, I think that the CSS3 text-renderingproperty is the best way to go. The effect is most noticeable on smaller font-sizes and doesn't make a big difference on large fonts.
虽然没有“尖锐”的价值，但我认为 CSS3text-rendering属性是最好的方法。这种效果在较小的字体上最为明显，对大字体没有太大影响。
Please note that there is very limited support for this but as far as I know it is the only method available.
请注意，对此的支持非常有限，但据我所知，这是唯一可用的方法。
Your other option (if you're using custom fonts) is to simply get higher quality vectors.
您的另一个选择（如果您使用自定义字体）是简单地获得更高质量的矢量。
回答by Mano Gunasekaran
see this example.Henrique Baldy explained what are the possible way to sharp https://www.linkedin.com/grp/post/2071438-268918276
看这个例子。Henrique Baldy 解释了有哪些可能的锐利方式https://www.linkedin.com/grp/post/2071438-268918276
