CSS 网络安全字体粗细——如何变得更薄？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3730561/
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
Web Safe Font Weights -- How to get thinner?
提问by HWD
When I design in Photoshop, my fonts are thin and crisp, but when I declare fonts in CSS -- even when using font-weight: lighter -- the fonts always appear bolder.
当我在 Photoshop 中进行设计时，我的字体又细又清晰，但是当我在 CSS 中声明字体时——即使使用 font-weight:lighter——字体总是显得更粗。
Maybe this is just how the browser renders the font (In IE fonts stay thin), but I was wondering if there were any tricks or tips for achieving the same thin, crisp looks.
也许这就是浏览器呈现字体的方式（在 IE 中字体保持纤细），但我想知道是否有任何技巧或技巧可以实现同样纤薄、清晰的外观。
采纳答案by spiral
You are right, it is a difference in rendering. How the text renders depends on your OS, your settings, and your browser (Safari, for example, renders bolder than IE). So there is no way to make this rendering match your photoshop comp.
你是对的，这是渲染的不同。文本的呈现方式取决于您的操作系统、您的设置和您的浏览器（例如，Safari 呈现的比 IE 更粗）。因此，无法使此渲染与您的 Photoshop 组件相匹配。
A bit more info here:
这里有更多信息：
回答by Caleb Crosby
Use CSS to smooth up your fonts...
使用 CSS 来平滑你的字体...
put this in your CSS:
把它放在你的 CSS 中：
-webkit-font-smoothing: antialiased;
回答by tybro0103
Font rendering can be complicated. Unfortunately, different browsers will render the same font differently.
字体渲染可能很复杂。不幸的是，不同的浏览器会以不同的方式呈现相同的字体。
As far as CSS goes, setting font-weight:100ensures the lightest available weight will be used. You may also want to set -webkit-font-smoothing:antialiased.
就 CSS 而言，设置font-weight:100确保将使用最轻的可用权重。您可能还想设置-webkit-font-smoothing:antialiased.
<style type="text/css">
body {
font-family:"Helvetica Neue", Arial, sans-serif;
font-weight:100;
-webkit-font-smoothing:antialiased;
}
</style>
Helvetica Neue is a very thin font native to OSX.
Helvetica Neue 是一种非常薄的 OSX 原生字体。
Your best bet is really http://www.google.com/fonts/
您最好的选择是http://www.google.com/fonts/
Also noteworthy:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator
同样值得注意的是：
https: //typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator
回答by tybro0103
I don't believe any one of the universal web fonts has a very thin weight in all browsers. However, there ways of embedding custom fonts in all major browsers now 'days.
我不相信任何一种通用网络字体在所有浏览器中的权重都非常小。但是，现在有很多方法可以在所有主要浏览器中嵌入自定义字体。
http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator
http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator
Any of these tools can get you just about any kind of font you can imagine. Just be careful with copyrights on the last one.
这些工具中的任何一个都可以为您提供您可以想象的任何类型的字体。请注意最后一个的版权。
