font-weight

'font-weight' プロパティー (CSS)

仕様書

構文

正符号

[21] Firefox 2 や Opera 9 では font-weightfont 内の <'font-weight'>整数の前に + をつけても構文解析時に無視されたものが CSSOM 上の値になりますが、 WinIE 6 では宣言ごと無視します。

[903] ChromeFirefox も、正符号ありに対応しています。

十の位未満の数値や値域外の数値の扱い

[7] font-weight: 200.0 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-weight%3A%20200.0%3B%0A%7D;h=;p=n;x=style-element

(名無しさん)

[8] >>7 Opera 9 は小数部だけ無視してくれますが、 Firefox 2 と WinIE 6宣言ごと無視します。 (名無しさん)

[9] font-weight: 200.4 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-weight%3A%20200.5%3B%0D%0A%7D;h=;p=n;x=style-element

[10] font-weight: 210 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-weight%3A%20210%3B%0D%0A%7D;h=;p=n;x=style-element

(名無しさん)

[11] >>9-10 Opera 9 は十の位以下切り捨てるようです。 ただし、 100 未満の場合や 900 より大きい場合には宣言ごと無視するようです。 (名無しさん)

[12] >>11 Firefox 2 や WinIE 6 はちょうどの値でなければ宣言ごと無視します。 (名無しさん)

[13] 先導0つき http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-weight%3A%20000000500%3B%0A%7D%0A;h=;p=n;x=style-element

(名無しさん)

[14] >>13 Firefox 2 や Opera 9 は先導0を無視するようですが、 WinIE 6宣言ごと無視します。

[904] FirefoxChrome も、 <integer> でないといけません。また先導0はあってもOKです。 百単位のちょうどの値でないといけません。

[906] Firefox でも Chrome でも、 CSSOM 上には正規形で現れます。

キーワード

[905] Firefox でも Chrome でも CSSOM 上にはそのままの値が現れます。 (整数形には変換されません。)

算出値

[1] getComputedStyle を使った検証用 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-weight%3A%20100%3B%0A%7D%0Aspan%20%7B%0A%20%20font-weight%3A%20bolder%3B%0A%7D;h=%3Cp%3Ezzzzzzzzzzz%3Cspan%20onclick%3D%22%0A%20%20w%20(getComputedStyle%20(document.getElementsByTagName%20('span')%5B0%5D%2C%20null).fontWeight)%3B%0A%22%3Exxxxxxxxxxxxxxxxxx;p=n;x=style-element

[3] currentStyle を使った検証用 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-weight%3A%20900%3B%0D%0A%7D%0D%0Aspan%20%7B%0D%0A%20%20font-weight%3A%20bolder%3B%0D%0A%7D;h=%3Cp%3Ezzzzzzzzzzz%3Cspan%20onclick%3D%22%0D%0A%20%20w%20(document.getElementsByTagName%20('span')%5B0%5D.currentStyle.fontWeight)%3B%0D%0A%22%3Exxxxxxxxxxxxxxxxxx;p=n;x=style-element

相対値

getComputedStyle

[2] bolder を使った場合の getComputedStyle で得られる値は、 Firefox 2 では 1 を足した値 (301 とか) になるようです (もちろん普通にスタイル・シート中に書いても宣言ごと無視されます)。 ただし 900 なら 900 のままです。 lighter なら逆 (1 引く、 100 より小さくならない)。

Opera 9 では実際に使われる値になるようです。

[18] Firefox算出値の -1 が積算される例 http://suika.fam.cx/gate/2007/cssom/viewer?c=html%20%7B%0A%20%20font-weight%3A%20lighter%3B%0A%7D%0Abody%20%7B%0A%20%20font-weight%3A%20lighter%3B%0A%7D%0Ap%20%7B%0A%20%20font-weight%3A%20lighter%3B%0A%7D;h=%3Cp%20onclick%3D%22%0A%20%20w%20(getComputedStyle%20(this%2C%20null).fontWeight)%3B%0A%22%3EXXXXXXXXXX%0A;p=n;x=style-element

[19] >>18 どうも、無限に減っていくわけではないらしい

元々の値lighter の限界値bolder の限界値
100100108
200199207
300298306
400397405
500496504
600595603
700694702
800793801
900892900

[20] >>18 lighterbolder を組み合わせればちゃんと元に戻るみたいです。

currentStyle

[4] >>3 Opera 9 は、 lighternormal なら常に normalbolderbold なら常に bold、数なら常に数になるようです。 (名無しさん)

[5] >>3 WinIE 6 では、bolder なら親の値に 300 を足した値、 lighter なら親の値から 300 を引いた値、 それ以外なら対応する数になるようです。ただし、100 未満になったり 900 より大きくなったりはしません。 (名無しさん)

[6] >>3 どちらのブラウザも、常に数になるようです。

根要素における扱い

[15] 根要素bolder を指定してみた (getComputedStyle) http://suika.fam.cx/gate/2007/cssom/viewer?c=html%20%7B%0A%20%20font-weight%3A%20bolder%3B%0A%7D%0A;h=%3Cp%20onclick%3D%22%0A%20%20w%20(getComputedStyle%20(document.documentElement%2C%20null).fontWeight)%3B%0A%22%3EXXXXXXXXX%0A;p=n;x=style-element

[16] >>15 (currentStyle 版) http://suika.fam.cx/gate/2007/cssom/viewer?c=html%20%7B%0D%0A%20%20font-weight%3A%20bolder%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20w%20(document.documentElement.currentStyle.fontWeight)%3B%0D%0A%22%3EXXXXXXXXX%0D%0A;p=n;x=style-element

[17] >>15-16 3ブラウザとも、根要素400 であるかのような動作をするようです。

実装

端末でのレンダリング

[901] GNU `gettext' utilities ( 版) http://www.gnu.org/software/gettext/manual/gettext.html#Style-rules

This property is supported, but most terminals can only render two different weights: normal and bold. Values >= 600 are rendered as bold.

[907] 游書体をCSSで指定しよう - Qiita [キータ] ( ( 版)) http://qiita.com/llsmrsll/items/f019b8daadf798066001

[22] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema ( 版) http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a20_186fo_font-weight

[23] Variable Fonts on the Web | WebKit () https://webkit.org/blog/7051/variable-fonts-on-the-web/

メモ

[24] OS/2 - OS/2 and Windows metrics table (OpenType 1.9) - Typography | Microsoft Learn, PeterCon, https://learn.microsoft.com/ja-jp/typography/opentype/spec/os2#usweightclass