標籤:

瀏覽器是怎樣根據 CSS 中是的 font-weight 屬性值渲染出具體字體粗細程度的?有統一規定的計算方式嗎?

圖片中5行文字,font-weight分別是100,500,600,700,900,可以看出粗細變化明顯不均勻。而且不同的瀏覽器也不同,關於這個粗細演算法有沒有一個統一的規定?

左邊是 Firefox,右邊是 Chrome。

補充:

我在stackoverflow上也提出了這個問題,看來只是瀏覽器支持的問題,大部分瀏覽器只支持一些邊界值比如400,700.

http://http://stackoverflow.com/questions/9630599/how-is-text-thickness-calculated-according-to-css-property-font-weight


有一點需要強調:

瀏覽器做的工作主要是根據 CSS 給出的 font-weight 值來匹配(match)字重(weight),並非根據 CSS 的 font-weight 值合成(synthesize)相應的字重。

但多數瀏覽器確實也會在粗體、斜體缺失的時候自己來合成,CSS 規範中也提到了這一點:

Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces. For the purposes of style matching, these faces must be treated as if they exist within the family.

如果 700 不存在的時候可以合成,那 500、600 不存在的時候是不是也該合成仿粗體(faux bold)呢?顯然,瀏覽器之間有分歧。

這張對比圖體現的就是 Firefox 沒有合成 600,直接用了 Georgia Bold(700),這應該是最合理的行為;而 Chrome 用 Georgia Regular 合成了 600。

但仿粗體的問題很大,「not well-loved by typographers」。而且從 Stack Overflow 的那張對比圖還可以看出來:仿粗體不僅丑,此處它比真正的粗體還寬。

CSS2.1 和 CSS3 的相關規範都值得一看。

另外,指定「100, 500, 600, 700, 900」卻沒有「400」,這是很奇怪的做法。


推薦閱讀:

翻譯 | 關鍵CSS和Webpack: 減少阻塞渲染的CSS的自動化解決方案
目前 CSS 實現豎排文本較為通用的方式是什麼?
CSS初學者轉學JS的時候要注意哪些問題?
[譯] 使用 CSS 的 font-size-adjust 屬性改善網頁排版

TAG:CSS | Web標準 |