[86] font-family は、 フォント名を指定するプロパティーです。

仕様書

構文

[91] フォント名, <generic-family>

構文解析

[17] WinIE 6 の font-family 特性値の構文解析はカオスです: (名無しさん)

[18] 引用符なしのごく普通な指定: http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20Courier%20New%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

思った通りに解釈してくれます。 (名無しさん)

[19] 引用符なしで SPACE を余分に指定 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20Courier%20%20New%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

余分な SPACE まで文字列の一部とみなす (CSSOM 上の値。) ため、 そんなフォントはないということでレンダリング上は無視されてしまいます。

(名無しさん)

[20] 引用符なしで空白部に注釈を含める http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20Courier%2F**%2F%20New%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

注釈を無視したものがCSSOM上の値になります (期待通りの動作)。 (名無しさん)

[21] >>20 のバリエーション http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20Courier%20%2F**%2FNew%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

これも期待通りの動作。 (名無しさん)

[22] 引用符なしで、後に余分な空白 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20Courier%20New%20%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

余分な空白は無視されます (期待通りの動作)。 (名無しさん)

[23] 引用符つきのオーソドックスな指定 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

期待通りのレンダリング。CSSOM 上の (fontFamily 特性の) 値は引用符つきになります。 (名無しさん)

[24] 引用符つき、空白が1つ余分 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20%20New%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

>>19 の引用符つき。CSSOM 上の値も >>19 の引用符つきになります。 こちらは期待通りの動作。 (名無しさん)

[25] 引用符なし、フォント名の途中に注釈 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20Courie%2F**%2Fr%20New%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

注釈を無視したものが CSSOM 上やレンダリング時に使われる値になります。

CSS 2.1 仕様上はこの指定をどう処理するのが正しいのか明確ではありません (書かれている通りに解釈するなら、WinIE の動作で正しい)。 Firefox 2 は WinIE 6 同様注釈を無視します。 Opera 9 は宣言全体を無視します。 (名無しさん)

[26] 引用符つき、注釈のような文字列が含まれる http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courie%2F**%2Fr%20New%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

>>25 の引用符つき。さすがにこれは注釈のような部分もフォント名とみなされます (期待通りの動作)。 (名無しさん)

[27] 引用符なし、escape あり http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20Courier%20%5CNew%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

期待通りに動作します。 (名無しさん)

[28] 引用符あり、 escape あり http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20%5CNew%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

>>27 の引用符あり。期待通りに動作します。 (名無しさん)

[29] アポストロフィありのオーソドックスなもの http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20'Courier%20New'%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

期待通り動作します。 CSSOM 上の値もアポストロフィつきになります。 (名無しさん)

[30] 空白をescape http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%5C%20New%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

なぜか CSSOM 上の値に \ が残ります。 レンダリングにもその値が使われるらしく、 そんなフォントはないので無視されています。 (名無しさん)

[31] 引用符あり、末尾に余分な空白 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%20%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

文字列の中身のところに余分な空白が入っていまして、 CSSOM 上もそれが保持されていますが、レンダリング上は無視されています (空白を除去したフォント名が使われています)。 (名無しさん)

[32] 引用符あり、先頭に余分な空白 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22%20Courier%20New%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

こちらは CSSOM 上もレンダリング上も空白が無視されず、そんなフォントないということでレンダリング上無視されています。 (名無しさん)

[33] 引用符あり、末尾に余分な HT http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%5C09%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

>>31 とは異なり、空白が無視されません。 (名無しさん)

[34] 引用符あり、末尾に余分な空白複数 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%20%20%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

>>31 同様、レンダリング上無視されます。 (名無しさん)

[35] 引用符あり、末尾に余分な空白複数 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%20%20%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

>>31 同様、レンダリング上無視されます。 (名無しさん)

[36] 引用符あり、末尾に余分な空白複数 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%20%20%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

>>31 同様、レンダリング上無視されます。 (名無しさん)

[37] 引用符あり、末尾に escape された余分な空白 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%5C20%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

>>31 同様、レンダリング上無視されます。 (名無しさん)

[38] 引用符の外に余分な文字列 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22aaa%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

CSSOM 上には全部反映されますが、外の部分はレンダリング上無視されているようです。 (名無しさん)

[39] 引用符の外に余分な文字列や引用符 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22aaa%22bbb%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

>>38 同様。レンダリング上は最初の引用符で囲まれた部分だけが用いられているようです。 (名無しさん)

[40] 引用符の前に余分な文字列 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20aaa%22Courier%20New%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

CSSOM 上は全部残り、レンダリング上は無視されています。 (名無しさん)

[41] >>40 の引用されている部分を逆転 http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22aaa%22Courier%20New%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

CSSOM 上は全部残り、レンダリング上は引用されていない方が使われています。 (名無しさん)

[42] 引用符つきのを前後に配置してみた http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22aaa%22Courier%20New%22bbb%22%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

CSSOM 上は全部残り、レンダリング上は全部無視されています。 (名無しさん)

[43] 引用符が閉じられていない http://suika.suikawiki.org/gate/2007/cssom/viewer?c=.ref%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%22%3B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-size%3A%2030px%3B%0D%0A%20%20font-family%3A%20%22Times%20New%20Roman%22%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20font-family%3A%20%22Courier%20New%0D%0A%20%20%3B%0D%0A%20%20color%3A%20blue%3B%0D%0A%7D%0D%0A;h=%3Cp%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0D%0A%3Cdiv%20class%3Dref%3ECOMPARE%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2F%3C%2Fdiv%3E;p=n;x=style-element

その後全部を飲み込んでいます。 (名無しさん)

[44] Opera 9 (Win32 版) の場合、CSSOM に現れる値は:

(名無しさん)

[45] >>44

(名無しさん)

[46] >>44

(名無しさん)

[47] Firefox 2 にはこのような奇癖はほとんどないようです。ただし >>46 の2つの場合にはどちらも勝ってに間に読点を補います。

CSSOM に現れる値が括られているか否かは、元々の指定で括られていたかだけに依存するようです。他の特性同様、 IDENT で使える文字か否かなどはまったく気にしていません。 区切りの読点の前後の空白は除去されます。

(名無しさん)

[48] WinIE 6 と Firefox 2 では、読点と読点の間や先頭と読点の間や読点と末尾の間に IDENT や STRING が1つもなくても構いません。 Firefox 2 では CSSOM 上の値では除去されています。 WinIE 6 では CSSOM 上にも残ります。 Opera 9 はそのような場合に宣言ごと無視されます。

Firefox 2 でも、読点すら含まれていないと宣言ごと無視されます。 WinIE 6 は完全に空文字列でも無視されません。 Firefox 2 では最低1つはフォント名が含まれていなければ無視されます。 (名無しさん)

[49] WinIE 6 と Firefox 2 では、読点と読点の間や先頭と読点の間や読点と末尾の間に IDENT や STRING が1つもなくても構いません。 Firefox 2 では CSSOM 上の値では除去されています。 WinIE 6 では CSSOM 上にも残ります。 Opera 9 はそのような場合に宣言ごと無視されます。

Firefox 2 でも、読点すら含まれていないと宣言ごと無視されます。 WinIE 6 は完全に空文字列でも無視されません。 Firefox 2 では最低1つはフォント名が含まれていなければ無視されます。 (名無しさん)

[50] 3ブラウザ共、長さ0の STRING に対して特別な処理はしていないようです。 (名無しさん)

[51] Opera 9 は inherit までフォント名と見なすようです。

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20inherit%3B%0D%0A%7D;h=%3Cp%3ExxxxxxxxxxxxxaxxxxxAAAAAAAAAAAAAAAAA;p=n;x=style-element

(名無しさん)

[52] Firefox 2 は最初の IDENT が inherit だとそれ以降に何があっても inherit が指定されたものとみなすようです。 そのため、その後に何かが続いていると非妥当として宣言ごと無視するようです。

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-family%3A%20inherit%20a%3B%0A%7D;h=%3Cp%3ExxxxxxxxxxxxxaxxxxxAAAAAAAAAAAAAAAAA;p=n;x=style-element

(名無しさん)

[53] >>52 1番目でなければ大丈夫。

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-family%3A%20a%20inherit%3B%0A%7D;h=;p=n;x=style-element

(名無しさん)

[54] >>52-53 (ないとは思いますが) 1番目のフォントとして inherit というフォント名を指定したいときは、引用符で括るか途中に注釈をはさめばおk。

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-family%3A%20inhe%2F**%2Frit%3B%0A%7D;h=%3Cp%20onclick%3D%22%0A%20%20w%20(sd%20().fontFamily)%3B%0A%22%3EClick%20this%20paragraph%20to%20show%20computed%20value%20of%20the%20'%3Ccode%3Efont-family%3C%2Fcode%3E'%20property.;p=n;x=style-element

getComputedStyle をみてもちゃんと inherit という指定が生き残っています。 (名無しさん)

[55] 共通族名の途中で注釈を使ってみた http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20font-family%3A%20serif%3B%0A%20%20font-size%3A%2030px%3B%0A%7D%0Ap.test%20%7B%0A%20%20font-family%3A%20mono%2F**%2Fspace%3B%0A%7D%0Ap.ref%20%7B%0A%20%20font-family%3A%20monospace%3B%0A%7D;h=%3Cp%3ECompare%20two%20paragraphs%20below%3A%3C%2Fp%3E%0A%3Cp%20class%3Dtest%3ETEST%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0A%3Cp%20class%3Dref%3EREF%3A%20ABCDEFGHIJKLMNOPQRSTUVWXYZ%20abcdefghijklmnopqrstuvwxyz%3C%2Fp%3E%0A;p=n;x=style-element (名無しさん)

[56] >>55 Opera 9 は前述の通り注釈をフォント名の一部と見なすらしい。 WinIE 6 と Firefox 2 は共通族名と見なすらしい。 (名無しさん)

[57] WinIE 6: 注釈のあと (直後でなくてもよい) で \ を使うとなぜかそれ以前が無視される http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20Courier%20%2F**%2F%5CNew%3B%0D%0A%7D%0D%0A;h=;p=n;x=style-element

この例では fontFamily が New になります。 (名無しさん)

[58] >>57 無視じゃなくて、複雑ななにかがおきるらしい。

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20Courier%2F**%2F%5C%20New%3B%0D%0A%7D%0D%0A;h=;p=n;x=style-element → \ New

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20Co%2F**%2Furier%5C%20New%3B%0D%0A%7D%0D%0A;h=;p=n;x=style-element → urierurier\ New

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20%2F**%2FCourier%5C%20New%3B%0D%0A%7D%0D%0A;h=;p=n;x=style-element → CourierCourier\ New

\ が残るのは空白の前だから。

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20%2F**%2FCourier%20%5CNew%3B%0D%0A%7D%0D%0A;h=;p=n;x=style-element → rier New

[59] http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20Cou%2F**%2Frie%5Cr%20New%3B%0D%0A%7D%0D%0A;h=;p=n;x=style-element → rierier New (名無しさん)

[60] >>46-47 STRING が連続する場合、 Opera 9 はフォント名が見つからないものとし、 Firefox 2 は勝手に間に読点を補います。

http://suika.suikawiki.org/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20%22a%22%20%22b%22%3B%0D%0A;h=;p=n;x=style-element

(名無しさん)

[61] CSS 2.1 の本文中の説明で、共通族名と同じフォント名は STRING にしなければならないというとろ、 例として initial と default が挙げられています。

どちらも CSS 2.1 では鍵語として定義されていませんが・・・。

(名無しさん)

[62] CSS 2.1 の <font-family> の構文の規定は不明瞭なのですが、 IDENT や DIMENSION や NUMBER が使えるように読めます。

Opera 9 では NUMBER や DIMENSION が来るのを認めているようですが、 Firefox 2 は宣言ごと無視します。

[70] Chrome では:

[71] Firefox では:

[65] IRC logs: freenode / #whatwg / 20120314 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120314#l-708

処理

フォントの選択

本文書体を指定する悪習

[9] webデザイナーのナナメガキ: CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 (2007-02-18 12:51:03 +09:00 版) http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html (名無しさん 2007-02-23 15:06:00 +00:00)

[10] >>9 なんでわざわざデフォルトフォントを指定するためにこんな苦労してるのかよくわからん (名無しさん 2007-02-23 15:07:32 +00:00)

[90] やめよう、CSSのシステムデフォルトフォント指定 - Chienomi, Masaki Haruka, , https://chienomi.org/articles/technology/201910-web-font-settings.html

[79] ( 版) http://hatenablog.com/

<script type="text/javascript">

// <!--

if (~navigator.userAgent.indexOf('Mac OS X')) {

document.write('<style type="text/css">html, body { font-family: \x27Helvetica\x27, \x27Arial\x27, \x27ヒラギノ角ゴ Pro W3\x27, \x27Hiragino Kaku Gothic Pro\x27, sans-serif; } </style>');

} else {

document.write('<style type="text/css">html, body { font-family: \x27Helvetica\x27, \x27Arial\x27, \x27メイリオ\x27, \x27Meiryo\x27, \x27MS PGothic\x27, sans-serif; } </style>');

}

// -->

</script>

関連

フォント依存符号化

<font face>

外字

メモ

[3] Word 9, 10 は font-family のほか、 mso-*-font-family を大量に指定してみたり、 @font-face 規則でフォントの詳細を指定してみたりしますが、 Excel 9, 10 は単純に font-family:"MS Gothic", monospace; のようにフォント名と総称名を指定するだけです。 mso-font-charset (Word では @font-face で指定) も一緒に指定されています。

(名無しさん [sage])

[4] 標準以外の日本語フォント / もうパンツはかない http://aor.ktplan.jp/fonts/nsfonts

CSSで使われるフォント / もうパンツはかない http://aor.ktplan.jp/fonts/cssfonts

[5] 等幅フォントのリストとサンプル http://useyan.x0.com/s/html/mono-font.htm (名無しさん 2005-05-04 08:17:04 +00:00)

[6] Travellers Tale: スタイルシートでのフォントの名前 http://homepage.mac.com/travellers/blog/C859012508/E1185390041/ (名無しさん 2006-01-06 02:59:07 +00:00)

[8] hail2u.net - Weblog - CSSで指定するフォント http://hail2u.net/blog/webdesign/font-in-css.html (名無しさん 2006-09-19 02:22:57 +00:00)

[11] Hatena::agenda - CSS font-familyプロパティについて一言 (2007-05-21 21:08:28 +09:00 版) http://d.hatena.ne.jp/jintrick/20070521 (名無しさん 2007-05-25 00:33:52 +00:00)

[12] Win Safariで日本語フォントを指定する方法β | Blog hamashun.com (2007-06-12 11:17:50 +09:00 版) http://www.hamashun.com/blog/2007/06/win_safari.html (名無しさん 2007-06-12 12:24:45 +00:00)

[13] Linux版Operaのギザギザフォント解消:メモランダム (2007-06-28 00:28:33 +09:00 版) http://mynotes.jp/blog/2007/06/linuxopera_font (名無しさん 2007-06-29 13:42:28 +00:00)

[14] Shishimushi - font-family: (2007-10-18 21:36:52 +09:00 版) http://kawatarou.info/note/opera/font_family.htm (名無しさん)

[63] JavaScript / CSS Font Detector - Detect fonts available in a browser | lalit.org ( 版) http://www.lalit.org/lab/javascript-css-font-detect

[64] Basic Data Types and Interfaces – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#DataTypeListOfFamilyNames

[66] WICD Core 1.0 ( ( 版)) http://www.w3.org/TR/WICD/#framework-font-support

[69] [whatwg] font security on measureText ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-June/039719.html

[75] Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ | OXY NOTES ( ( 版)) http://oxynotes.com/?p=4566

[76] 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_182fo_font-family

[77] IRC logs: freenode / #whatwg / 20150221 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20150221

[78] くたばれ"Helvetica Neue"と腹が立って作ったブックマークレット - Qiita ( 版) http://qiita.com/s_k_o_i/items/adb6411d67640631a662

[82] Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる | WWW WATCH () https://hyper-text.org/archives/2016/06/windows_yu_gothic_font.shtml

[84] Rename CSSFontFaceValue.fontFaceName to fontFamilyName (#323) (wilddamon著, ) https://github.com/w3c/css-houdini-drafts/commit/099cd776b41b37ddaa736ef38d7d77494f089d81

[85] [css-fonts-4] Migrate font-family property from css-fonts-3 (litherum著, ) https://github.com/w3c/csswg-drafts/commit/9d1db6cae41f8f955b49ec7e962b070e12acad51