網頁安全字體重量 - 如何獲得更薄？

Question

當我在Photoshop中設計時，我的字體很薄且很清晰，但是當我在CSS中聲明字體時 - 即使使用字體重量：較亮時 - 字體總是顯得更粗大。

也許這只是瀏覽器如何呈現字體（在IE字體保持不變），但我想知道是否有任何技巧或提示實現相同的薄，清晰的外觀。

Answer 1

你是對的，這是渲染的差異。文本呈現的方式取決於您的操作系統，您的設置和瀏覽器（例如，Safari會比IE更大膽）。所以沒有辦法使這個渲染符合你的photoshop comp。

一個在這裏多一點信息：

Browser Choice vs Font Rendering | Phinney on Fonts

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

我不相信在所有的瀏覽器非常薄重量通用Web字體中的任何一個。但是，現在有幾種方法可以在所有主流瀏覽器中嵌入自定義字體。

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

所有這些工具可以讓你幾乎任何類型的字體，你可以想像。請注意最後一個版權。

Answer 4

使用CSS來平滑你的字體...

把這個在你的CSS：

-webkit-font-smoothing: antialiased;