font-weight

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

仕様書

[902] CSS Fonts Module Level 3 (2013-09-05 07:49:16 +09:00 版) http://dev.w3.org/csswg/css-fonts/#font-weight-prop

構文

正符号

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

http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-weight%3A%20%2B800%3B%0A%7D%0Ap%20%7B%0A%20%20font%3A%20%2B800%201px%20serif%3B%0A%7D%0A;h=;p=n;x=style-element;i=html-div

[903] Chrome も Firefox も、正符号ありに対応しています。 2013-09-05T14:08:30.500Z

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

[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] Firefox も Chrome も、 <integer> でないといけません。また先導0はあってもOKです。百単位のちょうどの値でないといけません。 2013-09-05T14:10:06.800Z

[906] Firefox でも Chrome でも、 CSSOM 上には正規形で現れます。 2013-09-05T14:10:55.300Z

キーワード

[905] Firefox でも Chrome でも CSSOM 上にはそのままの値が現れます。 (整数形には変換されません。) 2013-09-05T14:11:18.500Z

算出値

[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` の限界値
`100`	`100`	`108`
`200`	`199`	`207`
`300`	`298`	`306`
`400`	`397`	`405`
`500`	`496`	`504`
`600`	`595`	`603`
`700`	`694`	`702`
`800`	`793`	`801`
`900`	`892`	`900`

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

`currentStyle`

[4] >>3 Opera 9 は、 lighter か normal なら常に normal、 bolder か bold なら常に 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 (2009-03-20 11:59:11 +09:00 版) 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.

msgcat 命令。

[907] 游書体をCSSで指定しよう - Qiita [キータ] ( (2013-11-01 06:18:16 +09:00 版)) http://qiita.com/llsmrsll/items/f019b8daadf798066001

[22] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema (2011-09-29 13:00:00 +09:00 版) 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 (2017-09-26 23:23:30 +09:00) 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, 2023-01-01T12:48:39.000Z https://learn.microsoft.com/ja-jp/typography/opentype/spec/os2#usweightclass