网络安全字体粗细——如何变细？

Question

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

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

Answer 1

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

将其放入你的 CSS 中：

-webkit-font-smoothing: antialiased;

Answer 2

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

就 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

Answer 3

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

更多信息请参见：

浏览器选择与字体渲染 |菲尼字体

Answer 4

我不相信任何一种通用网络字体在所有浏览器中都具有非常薄的重量。然而，现在有一些方法可以在所有主要浏览器中嵌入自定义字体。

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

这些工具中的任何一个都可以让您关于您可以想象的任何类型的字体。只是要小心最后一张的版权。