[86] font-family
は、
フォント名を指定するプロパティーです。
[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] font-family: -moz-fixed;
[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)
[7]
-webkit-body
(名無しさん [sage])
[8] hail2u.net - Weblog - CSSで指定するフォント http://hail2u.net/blog/webdesign/font-in-css.html (名無しさん 2006-09-19 02:22:57 +00:00)
[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)
[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
(名無しさん)
[15]
Movable Type de UTF-8 [dh memoranda] (2007-10-18 21:44:29 +09:00
版) http://uva.jp/dh/mt/archives/000191.html
.comments-body textarea { font-family: none }
ってやってみました。上手くうごくのか、手元に環境がないので試すことができません。むむー。
だめみたいです。。。 font-familyで日本語フォントを指定するのはダメなのですか?
(名無しさん)
[16]
font-family
の値 none
についてですが、それなりに使われているようではありますが、
対応している Webブラウザはないように見えます (単に未知のフォント名として扱われるというのが仕様通りの動作)。
扱っている解説の類も見つかりません。
(名無しさん 2007-10-18 12:53:48 +00:00)
[17]
WinIE 6 の font-family
特性値の構文解析はカオスです:
(名無しさん)
[18] 引用符なしのごく普通な指定: http://suika.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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 に現れる値は:
unknown,known
は , known
になります。)FULLWIDTH LATIN SMALL LETTER M
などは大文字に変換されました。SPACE
が含まれていると、
"
で括られます。そうでないフォント名は括られていても除去されます。
ただしその他の空白や \
が含まれているとどうなるのかは未検証
(そんなフォントがないので・・・) です。,
のあと1つだけ
SPACE
に正規化されます。(名無しさん)
HT
を使った場合も、やはりそのフォント名が存在しないものとされます。
http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20Courier%09New%3B%0D%0A%7D%0D%0A;h=;p=n;x=style-element(名無しさん)
IDENT
の後に STRING
が続くと、そのフォント名が存在しないものと見なされます。 (引用符も含めたフォント名か何かを探している可能性はあります。なんにせよ、宣言自体は無視されません。)
http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20font-family%3A%20Courier%20%22New%22%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A;h=;p=n;x=style-elementSTRING
の後に IDENT
が続くと、
勝手に間に読点を補うようです。
http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20%0D%0A%20%20font-family%3A%20%22Courier%22%20Courier%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A;h=;p=n;x=style-element(名無しさん)
[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
までフォント名と見なすようです。
(名無しさん)
[52]
Firefox 2 は最初の IDENT
が inherit
だとそれ以降に何があっても inherit
が指定されたものとみなすようです。
そのため、その後に何かが続いていると非妥当として宣言ごと無視するようです。
(名無しさん)
(名無しさん)
[54]
>>52-53 (ないとは思いますが) 1番目のフォントとして inherit
というフォント名を指定したいときは、引用符で括るか途中に注釈をはさめばおk。
getComputedStyle
をみてもちゃんと
inherit
という指定が生き残っています。
(名無しさん)
[55] 共通族名の途中で注釈を使ってみた http://suika.fam.cx/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.fam.cx/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.fam.cx/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.fam.cx/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
(名無しさん)
[59]
http://suika.fam.cx/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 は勝手に間に読点を補います。
(名無しさん)
[61]
CSS 2.1 の本文中の説明で、共通族名と同じフォント名は
STRING
にしなければならないというとろ、
例として initial
と default
が挙げられています。
(名無しさん)
[62]
CSS 2.1 の <font-family>
の構文の規定は不明瞭なのですが、
IDENT
や
DIMENSION
や
NUMBER
が使えるように読めます。
Opera 9 では NUMBER
や
DIMENSION
が来るのを認めているようですが、
Firefox 2 は宣言ごと無視します。
(名無しさん)
[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
[65] IRC logs: freenode / #whatwg / 20120314 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120314#l-708
[66] WICD Core 1.0 ( ( 版)) http://www.w3.org/TR/WICD/#framework-font-support
[68] Bug 22339 – Support Indian web sites with EOT by on-the-fly transcoding to Unicode ( ( 版)) https://bugs.webkit.org/show_bug.cgi?id=22339
[69] [whatwg] font security on measureText ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-June/039719.html
SP
区切りの値とみなされます。,
区切りですが、 <string> と <ident> が連続するところや
<string> と <string> の間も区切りとみなされます。,
の連続や最初と最後にあるのは非妥当です。,
区切りとしてみた最初の <ident> (群) が inherit
,
initial
, default
(ASCII大文字・小文字不区別) なら無視されます。
その結果空になるとその連続だけが無視されます。例えば hoge, inherit initial abc, def initial
は
"hoge", "abc", "def initial"
と同じと解釈されます。serif hoge
のように <generic-family> のあとに <ident> が続く場合、
<generic-family> とはみなされません。,
区切りの最後の項目が <number> や <dimension> であればその項目だけが無視されます。
(それ以外の場所なら全体が非妥当になります。)"SeRIF"
は次項により <ident> として直列化されますが、
元の大文字・小文字のままです。)SP
が含まれれば <string> として、含まれなければ <ident>
として直列化されます。 inherit
や serif
などであってもです。SP
が、なければ空文字列が区切りとなります。,
区切りで、 <string> と <ident> や
<string> と <string> が連続するところがあると非妥当です。,
の連続や最初と最後にあるのは非妥当です。,
区切りとしてみた最初の <ident> が inherit
,
initial
, -moz-initial
, default
(ASCII大文字・小文字不区別) なら非妥当です。serif hoge
のように <generic-family> のあとに <ident> が続く場合、
<generic-family> とはみなされません。[72] Bug 17070 – CSS: Request for proprietary extension to generic font families 2: 'blackletter' ( ( 版)) https://bugs.webkit.org/show_bug.cgi?id=17070
[73] WebKit は <generic-family> として
-webkit-pictograph
, -webkit-body
,
-webkit-blackletter
に対応しているようです。
[74] ですが >>70 の通り正規化されているのは -webkit-body
だけみたいです。
[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
<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>
[80] [css-fonts] "system" generic font name (Myles C. Maxfield 著, 版) https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html
[81] jonathantneal/system-font-face ( 版) https://github.com/jonathantneal/system-font-face
[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
[87] Intent to ship: Changing default Japanese fonts to modern fonts - Google グループ () https://groups.google.com/forum/#!topic/mozilla.dev.platform/DZ4QgKAWEnY
※編集部注:公開当初、旧字の「<font style="font-family:'MS UI Gothic','Hiragino Mincho Pro'">禱</font>」は環境によっては「ネへんに壽」の字体で示されるかたちで表示してありましたので、フォントを指定するように変更しました。以下の本文中で意図した旧字の「<font style="font-family:'MS UI Gothic','Hiragino Mincho Pro'">禱</font>」は「示へんに壽」で、下の画像で示す文字です。(2009年5月19日)