當我在Photoshop中設計時,我的字體很薄且很清晰,但是當我在CSS中聲明字體時 - 即使使用字體重量:較亮時 - 字體總是顯得更粗大。網頁安全字體重量 - 如何獲得更薄?
也許這只是瀏覽器如何呈現字體(在IE字體保持不變),但我想知道是否有任何技巧或提示實現相同的薄,清晰的外觀。
當我在Photoshop中設計時,我的字體很薄且很清晰,但是當我在CSS中聲明字體時 - 即使使用字體重量:較亮時 - 字體總是顯得更粗大。網頁安全字體重量 - 如何獲得更薄?
也許這只是瀏覽器如何呈現字體(在IE字體保持不變),但我想知道是否有任何技巧或提示實現相同的薄,清晰的外觀。
你是對的,這是渲染的差異。文本呈現的方式取決於您的操作系統,您的設置和瀏覽器(例如,Safari會比IE更大膽)。所以沒有辦法使這個渲染符合你的photoshop comp。
一個在這裏多一點信息:
字體渲染可能會很複雜。不幸的是,不同的瀏覽器會呈現不同的相同字體。
就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
我不相信在所有的瀏覽器非常薄重量通用Web字體中的任何一個。但是,現在有幾種方法可以在所有主流瀏覽器中嵌入自定義字體。
http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator
所有這些工具可以讓你幾乎任何類型的字體,你可以想像。請注意最後一個版權。
使用CSS來平滑你的字體...
把這個在你的CSS:
-webkit-font-smoothing: antialiased;
這實際上是有幫助的。至少對於webkit瀏覽器!請檢查此答案以類似的問題:http://stackoverflow.com/a/4012154/336235 – 2012-09-04 06:39:17
是任何這樣的解決方案可用於Opera,IE和Firefox? – 2013-07-08 14:30:48
如果字體的佈局並不重要,這是一個快速解決方案,但實際上並沒有做字體更清晰,因爲它只是具有較輕的字體重量的選定字體(或字體本身是用細線設計的)。 – einord 2013-05-06 08:14:47