网络安全字体粗细——如何变得更薄？答案

【问题标题】：Web Safe Font Weights -- How to get thinner?网络安全字体粗细——如何变得更薄？
【发布时间】：2011-04-13 10:24:29
【问题描述】：

当我在 Photoshop 中设计时，我的字体又细又脆，但是当我在 CSS 中声明字体时——即使使用 font-weight:lighter——字体总是显得更粗。

也许这正是浏览器呈现字体的方式（在 IE 中字体保持纤细），但我想知道是否有任何技巧或技巧可以实现同样纤细、清晰的外观。

【问题讨论】：

【解决方案1】：

字体渲染可能很复杂。不幸的是，不同的浏览器会以不同的方式呈现相同的字体。

就 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 是 OSX 原生的一种非常细的字体。

你最好的选择真的是http://www.google.com/fonts/

另外值得注意的是：
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator

【讨论】：

如果字体的布局无关紧要，这是一个快速的解决方案，但实际上并没有使字体更清晰，因为它只是选择的字体具有较轻的可用字体粗细（或字体本身是用细线设计的）。
非常喜欢你的答案，我一直在寻找这个答案......谢谢。

【解决方案2】：

使用 CSS 来平滑你的字体...

把它放在你的 CSS 中：

-webkit-font-smoothing: antialiased;

【讨论】：

这实际上是有帮助的。至少对于 webkit 浏览器来说！还要检查类似问题的答案：stackoverflow.com/a/4012154/336235
是否有适用于 Opera、IE 和 Firefox 的此类解决方案？

【解决方案3】：

我不相信任何一种通用网络字体在所有浏览器中的重量都很轻。然而，现在所有主流浏览器都可以嵌入自定义字体。

http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator

这些工具中的任何一个都可以为您提供您能想象到的任何类型的字体。请注意最后一个的版权。

【讨论】：

【解决方案4】：

你是对的，这是渲染的不同。文本的呈现方式取决于您的操作系统、设置和浏览器（例如，Safari 的呈现方式比 IE 更粗）。所以没有办法让这个渲染匹配你的 Photoshop 合成。

【讨论】：