Question

当我在Photoshop中设计时，我的字体很薄而且很清晰，但是当我在CSS中声明字体时 - 即使使用font-weight：更轻 - 字体总是显得更大胆。

也许这就是浏览器呈现字体的方式（在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 comp相匹配。

这里有更多信息：

Browser Choice vs Font Rendering | Phinney on Fonts

Answer 4

我不相信任何一种通用网络字体在所有浏览器中的重量都非常轻。但是，现在有几种方法可以在所有主流浏览器中嵌入自定义字体。

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

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

Web Safe字体权重 - 如何变薄？

4 个答案: