[86] [DFN[[CODE(CSS)@en[font-family]]]] は、 [[フォント名]]を指定する[[プロパティー]]です。 * 仕様書 [REFS[ - [89] [CITE@en[CSS Fonts Module Level 4]], [TIME[2020-10-16T18:46:59.000Z]], [TIME[2020-10-17T02:43:30.718Z]] ]REFS] * 構文 [91] [[フォント名]], [CODE[]] ** 構文解析 [17] [[WinIE 6]] の [CODE(CSS)@en[[[font-family]]]] [[特性値]]の[[構文解析]]は[[カオス]]です: ([[名無しさん]]) [18] [[引用符]]なしのごく普通な指定: 思った通りに解釈してくれます。 ([[名無しさん]]) [19] [[引用符]]なしで [CODE(charname)@en[[[SPACE]]]] を余分に指定余分な [CODE(charname)@en[[[SPACE]]]] まで[[文字列]]の一部とみなす ([[CSSOM]] 上の値。) ため、そんな[[フォント]]はないということで[[レンダリング]]上は無視されてしまいます。 ([[名無しさん]]) [20] [[引用符]]なしで[[空白]]部に[[注釈]]を含める [[注釈]]を無視したものが[[CSSOM]]上の値になります (期待通りの動作)。 ([[名無しさん]]) [21] >>20 のバリエーションこれも期待通りの動作。 ([[名無しさん]]) [22] [[引用符]]なしで、後に余分な[[空白]] 余分な[[空白]]は無視されます (期待通りの動作)。 ([[名無しさん]]) [23] [[引用符]]つきのオーソドックスな指定期待通りの[[レンダリング]]。[[CSSOM]] 上の ([CODE(DOMa)@en[[[fontFamily]]]] [[特性]]の) 値は[[引用符]]つきになります。 ([[名無しさん]]) [24] [[引用符]]つき、[[空白]]が1つ余分 >>19 の[[引用符]]つき。[[CSSOM]] 上の値も >>19 の[[引用符]]つきになります。こちらは期待通りの動作。 ([[名無しさん]]) [25] [[引用符]]なし、[[フォント名]]の途中に[[注釈]] [[注釈]]を無視したものが [[CSSOM]] 上や[[レンダリング]]時に使われる値になります。 [[CSS 2.1]] 仕様上はこの指定をどう処理するのが正しいのか明確ではありません (書かれている通りに解釈するなら、[[WinIE]] の動作で正しい)。 [[Firefox]] 2 は [[WinIE 6]] 同様[[注釈]]を無視します。 [[Opera]] 9 は[[宣言]]全体を[[無視]]します。 ([[名無しさん]]) [26] [[引用符]]つき、[[注釈]]のような[[文字列]]が含まれる >>25 の[[引用符]]つき。さすがにこれは[[注釈]]のような部分も[[フォント名]]とみなされます (期待通りの動作)。 ([[名無しさん]]) [27] [[引用符]]なし、[[escape]] あり期待通りに動作します。 ([[名無しさん]]) [28] [[引用符]]あり、 [[escape]] あり >>27 の[[引用符]]あり。期待通りに動作します。 ([[名無しさん]]) [29] [[アポストロフィ]]ありのオーソドックスなもの期待通り動作します。 [[CSSOM]] 上の値も[[アポストロフィ]]つきになります。 ([[名無しさん]]) [30] [[空白]]を[[escape]] なぜか [[CSSOM]] 上の値に [CODE(CSS)[[[\]]]] が残ります。 [[レンダリング]]にもその値が使われるらしく、そんな[[フォント]]はないので無視されています。 ([[名無しさん]]) [31] [[引用符]]あり、末尾に余分な[[空白]] [[文字列]]の中身のところに余分な[[空白]]が入っていまして、 [[CSSOM]] 上もそれが保持されていますが、[[レンダリング]]上は無視されています ([[空白]]を除去した[[フォント名]]が使われています)。 ([[名無しさん]]) [32] [[引用符]]あり、先頭に余分な[[空白]] こちらは [[CSSOM]] 上も[[レンダリング]]上も[[空白]]が無視されず、そんな[[フォント]]ないということで[[レンダリング]]上無視されています。 ([[名無しさん]]) [33] [[引用符]]あり、末尾に余分な [CODE(charname)@en[[[HT]]]] >>31 とは異なり、[[空白]]が無視されません。 ([[名無しさん]]) [34] [[引用符]]あり、末尾に余分な[[空白]]複数 >>31 同様、[[レンダリング]]上無視されます。 ([[名無しさん]]) [35] [[引用符]]あり、末尾に余分な[[空白]]複数 >>31 同様、[[レンダリング]]上無視されます。 ([[名無しさん]]) [36] [[引用符]]あり、末尾に余分な[[空白]]複数 >>31 同様、[[レンダリング]]上無視されます。 ([[名無しさん]]) [37] [[引用符]]あり、末尾に [[escape]] された余分な[[空白]] >>31 同様、[[レンダリング]]上無視されます。 ([[名無しさん]]) [38] [[引用符]]の外に余分な文字列 [[CSSOM]] 上には全部反映されますが、外の部分は[[レンダリング]]上無視されているようです。 ([[名無しさん]]) [39] [[引用符]]の外に余分な[[文字列]]や[[引用符]] >>38 同様。[[レンダリング]]上は最初の[[引用符]]で囲まれた部分だけが用いられているようです。 ([[名無しさん]]) [40] [[引用符]]の前に余分な文字列 [[CSSOM]] 上は全部残り、[[レンダリング]]上は無視されています。 ([[名無しさん]]) [41] >>40 の[[引用]]されている部分を逆転 [[CSSOM]] 上は全部残り、[[レンダリング]]上は[[引用]]されていない方が使われています。 ([[名無しさん]]) [42] [[引用符]]つきのを前後に配置してみた [[CSSOM]] 上は全部残り、[[レンダリング]]上は全部無視されています。 ([[名無しさん]]) [43] [[引用符]]が閉じられていないその後全部を飲み込んでいます。 ([[名無しさん]]) [44] [[Opera]] 9 ([[Win32]] 版) の場合、[[CSSOM]] に現れる値は: - その[[システム]]上に存在しない[[フォント名]]は指定されなかったことになります。[[区切子]]の[[読点]]があれば、それも含めて除去されます。その結果[[特性値]]が[[空文字列]]になることもあります。 - ただし、複数の[[フォント名]]が指定された場合で、後ろの方の[[フォント名]]が存在するものの場合には、その前の[[読点]]は残ります。 (例えば [CODE(CSS)@en[unknown,known]] は [CODE(CSS)@en[, known]] になります。) - [[日本語]]の[[フォント名]]がある[[フォント]]の場合、その[[フォント]]の[[英語]]の[[フォント名]]は存在しない[[フォント名]]と見なされるようです。 - [[フォント名]]の[[大文字]]・[[小文字]]は実際のものに合わせて[[正規化]]されます。すべての [[Unicode]] [[文字]]かどうかは定かではありませんが、少なくても [CODE(charname)@en[[[FULLWIDTH LATIN SMALL LETTER M]]]] などは[[大文字]]に変換されました。 - [[フォント名]]に [CODE(charname)@en[[[SPACE]]]] が含まれていると、 [CODE(CSS)[[["]]]] で括られます。そうでない[[フォント名]]は括られていても除去されます。ただしその他の[[空白]]や [CODE(CSS)[[[\]]]] が含まれているとどうなるのかは未検証 (そんな[[フォント]]がないので・・・) です。 - [[フォント名]]の区切りは [CODE(CSS)[[[,]]]] のあと1つだけ [CODE(charname)@en[[[SPACE]]]] に[[正規化]]されます。 - [[共通族名]]の後に[[フォント名]]が続いていたり、同じ[[フォント名]]が複数表れていたりしても特別な処理はしないようです。 - [[注釈]]があるとその[[フォント名]]は存在しないものとされます ([[注釈]]も[[フォント名]]の一部とみなしている?)。 - 括られていない[[フォント名]]の途中の[[空白]]が (本来1文字なのに) 複数文字あると、その[[フォント名]]が存在しないものとされます ([[空白]]全部[[フォント名]]とみなしてる?)。 ([[名無しさん]]) [45] >>44 - [[空白]]の部分に [CODE(茶rname)@en[[[HT]]]] を使った場合も、やはりその[[フォント名]]が存在しないものとされます。 ([[名無しさん]]) [46] >>44 - [CODE(CSS)[[[IDENT]]]] の後に [CODE(CSS)[[[STRING]]]] が続くと、その[[フォント名]]が存在しないものと見なされます。 ([[引用符]]も含めた[[フォント名]]か何かを探している可能性はあります。なんにせよ、[[宣言]]自体は[[無視]]されません。) - 逆に [CODE(CSS)[[[STRING]]]] の後に [CODE(CSS)[[[IDENT]]]] が続くと、勝手に間に[[読点]]を補うようです。 ([[名無しさん]]) [47] [[Firefox]] 2 にはこのような[[奇癖]]はほとんどないようです。ただし >>46 の2つの場合にはどちらも勝ってに間に[[読点]]を補います。 [[CSSOM]] に現れる値が括られているか否かは、元々の指定で括られていたかだけに依存するようです。他の[[特性]]同様、 [CODE(CSS)[[[IDENT]]]] で使える[[文字]]か否かなどはまったく気にしていません。区切りの[[読点]]の前後の[[空白]]は除去されます。 ([[名無しさん]]) [48] [[WinIE 6]] と [[Firefox]] 2 では、[[読点]]と[[読点]]の間や先頭と[[読点]]の間や[[読点]]と末尾の間に [CODE(CSS)[[[IDENT]]]] や [CODE(CSS)[[[STRING]]]] が1つもなくても構いません。 [[Firefox]] 2 では [[CSSOM]] 上の値では除去されています。 [[WinIE 6]] では [[CSSOM]] 上にも残ります。 [[Opera]] 9 はそのような場合に[[宣言]]ごと[[無視]]されます。 [[Firefox]] 2 でも、[[読点]]すら含まれていないと[[宣言]]ごと[[無視]]されます。 [[WinIE 6]] は完全に[[空文字列]]でも[[無視]]されません。 [[Firefox]] 2 では最低1つは[[フォント名]]が含まれていなければ[[無視]]されます。 ([[名無しさん]]) [49] [[WinIE 6]] と [[Firefox]] 2 では、[[読点]]と[[読点]]の間や先頭と[[読点]]の間や[[読点]]と末尾の間に [CODE(CSS)[[[IDENT]]]] や [CODE(CSS)[[[STRING]]]] が1つもなくても構いません。 [[Firefox]] 2 では [[CSSOM]] 上の値では除去されています。 [[WinIE 6]] では [[CSSOM]] 上にも残ります。 [[Opera]] 9 はそのような場合に[[宣言]]ごと[[無視]]されます。 [[Firefox]] 2 でも、[[読点]]すら含まれていないと[[宣言]]ごと[[無視]]されます。 [[WinIE 6]] は完全に[[空文字列]]でも[[無視]]されません。 [[Firefox]] 2 では最低1つは[[フォント名]]が含まれていなければ[[無視]]されます。 ([[名無しさん]]) [50] 3ブラウザ共、長さ0の [CODE(CSS)[[[STRING]]]] に対して特別な処理はしていないようです。 ([[名無しさん]]) [51] [[Opera]] 9 は [CODE(CSS)[[[inherit]]]] まで[[フォント名]]と見なすようです。 ;; ([[名無しさん]]) [52] [[Firefox]] 2 は最初の [CODE(CSS)@en[[[IDENT]]]] が [CODE(CSS)@en[[[inherit]]]] だとそれ以降に何があっても [CODE(CSS)@en[[[inherit]]]] が指定されたものとみなすようです。そのため、その後に何かが続いていると[[非妥当]]として[[宣言]]ごと[[無視]]するようです。 ;; ([[名無しさん]]) [53] >>52 1番目でなければ大丈夫。 ;; ([[名無しさん]]) [54] >>52-53 (ないとは思いますが) 1番目の[[フォント]]として [CODE(CSS)[[[inherit]]]] という[[フォント名]]を指定したいときは、[[引用符]]で括るか途中に[[注釈]]をはさめばおk。 ;; [CODE(DOMm)@en[[[getComputedStyle]]]] をみてもちゃんと [CODE(CSS)[[[inherit]]]] という指定が生き残っています。 ([[名無しさん]]) [55] [[共通族名]]の途中で[[注釈]]を使ってみた ([[名無しさん]]) [56] >>55 [[Opera]] 9 は前述の通り[[注釈]]を[[フォント名]]の一部と見なすらしい。 [[WinIE 6]] と [[Firefox]] 2 は[[共通族名]]と見なすらしい。 ([[名無しさん]]) [57] [[WinIE 6]]: [[注釈]]のあと (直後でなくてもよい) で [CODE(CSS)[[[\]]]] を使うとなぜかそれ以前が無視されるこの例では [CODE(DOMa)@en[[[fontFamily]]]] が [Q@en[New]] になります。 ([[名無しさん]]) [58] >>57 無視じゃなくて、複雑ななにかがおきるらしい。 → [Q@en[\ New]] → [Q@en[urierurier\ New]] → [Q@en[CourierCourier\ New]] ;; [CODE(CSS)[[[\]]]] が残るのは[[空白]]の前だから。 → [Q@en[rier New]] [59] → [Q@en[rierier New]] ([[名無しさん]]) [60] >>46-47 [CODE(CSS)@en[[[STRING]]]] が連続する場合、 [[Opera]] 9 は[[フォント名]]が見つからないものとし、 [[Firefox]] 2 は勝手に間に[[読点]]を補います。 ;; ([[名無しさん]]) [61] [[CSS 2.1]] の本文中の説明で、[[共通族名]]と同じ[[フォント名]]は [CODE(DOMi)@en[[[STRING]]]] にしなければならないというとろ、例として [CODE(CSS)@en[[[initial]]]] と [CODE(CSS)@en[[[default]]]] が挙げられています。 ;; どちらも [[CSS 2.1]] では[[鍵語]]として定義されていませんが・・・。 ([[名無しさん]]) [62] [[CSS 2.1]] の [CODE(CSS)@en[<[[font-family]]>]] の構文の規定は不明瞭なのですが、 [CODE(CSS)@en[[[IDENT]]]] や [CODE(CSS)@en[[[DIMENSION]]]] や [CODE(CSS)@en[[[NUMBER]]]] が使えるように読めます。 [[Opera]] 9 では [CODE(CSS)@en[[[NUMBER]]]] や [CODE(CSS)@en[[[DIMENSION]]]] が来るのを認めているようですが、 [[Firefox]] 2 は[[宣言]]ごと[[無視]]します。 [70] [[Chrome]] では: [TIME[2013-09-07T05:17:39.00Z]] - [[]] と [[]] が値として使えます。 - [[]] の連続はひとつながりの [CODE(charname)@en[[[SP]]]] 区切りの値とみなされます。 - [CODE(char)[[[,]]]] 区切りですが、 [[]] と [[]] が連続するところや [[]] と [[]] の間も区切りとみなされます。 - [CODE(char)[[[,]]]] の連続や最初と最後にあるのは非妥当です。 - [[]] は空文字列でも大丈夫です。 - [CODE(char)[[[,]]]] 区切りとしてみた最初の [[]] (群) が [CODE(CSS)@en[[[inherit]]]], [CODE(CSS)@en[[[initial]]]], [CODE(CSS)@en[[[default]]]] ([[ASCII大文字・小文字不区別]]) なら無視されます。その結果空になるとその連続だけが無視されます。例えば [CODE[hoge, inherit initial abc, def initial]] は [CODE["hoge", "abc", "def initial"]] と同じと解釈されます。 - [CODE(CSS)@en[serif hoge]] のように [[]] のあとに [[]] が続く場合、 [[]] とはみなされません。 - [CODE(char)[[[,]]]] 区切りの最後の項目が [[]] や [[]] であればその項目だけが無視されます。 (それ以外の場所なら全体が[[非妥当]]になります。) - [[]] なら[[小文字]]に正規化されますが、それ以外の [[]] や [[]] では元の形が保持されます。 ([CODE(CSS)["SeRIF"]] は次項により [[]] として[[直列化]]されますが、元の大文字・小文字のままです。) - 元の表現に関わらず、 [CODE(charname)@en[[[SP]]]] が含まれれば [[]] として、含まれなければ [[]] として[[直列化]]されます。 [CODE(CSS)@en[[[inherit]]]] や [CODE(CSS)@en[[[serif]]]] などであってもです。 [71] [[Firefox]] では: [TIME[2013-09-07T05:30:39.600Z]] - [[]] と [[]] が値として使えます。 - [[]] の連続はひとつながりの値とみなされます。元々間に [[]] があれば [CODE(charname)@en[[[SP]]]] が、なければ空文字列が区切りとなります。 - [CODE(char)[[[,]]]] 区切りで、 [[]] と [[]] や [[]] と [[]] が連続するところがあると[[非妥当]]です。 - [CODE(char)[[[,]]]] の連続や最初と最後にあるのは非妥当です。 - [[]] は空文字列でも大丈夫です。 - [CODE(char)[[[,]]]] 区切りとしてみた最初の [[]] が [CODE(CSS)@en[[[inherit]]]], [CODE(CSS)@en[[[initial]]]], [CODE(CSS)@en[[[-moz-initial]]]], [CODE(CSS)@en[[[default]]]] ([[ASCII大文字・小文字不区別]]) なら[[非妥当]]です。 - [CODE(CSS)@en[serif hoge]] のように [[]] のあとに [[]] が続く場合、 [[]] とはみなされません。 - [[]] でも [[]] でも元の大文字・小文字が保持されます。 - 元の [[]] と [[]] の区別は保持されて[[直列化]]されます。どちらも [[escape]] されないので再度構文解析できないこともあります。 [65] [CITE[IRC logs: freenode / #whatwg / 20120314]] ( ([TIME[2012-03-18 01:33:50 +09:00]] 版)) * 処理 [SEE[ [[フォントの選択]] ]] * 本文書体を指定する悪習 [9] [CITE[webデザイナーのナナメガキ: CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係]] ([CODE[2007-02-18 12:51:03 +09:00]] 版) ([[名無しさん]] [WEAK[2007-02-23 15:06:00 +00:00]]) [10] >>9 なんでわざわざデフォルトフォントを指定するためにこんな苦労してるのかよくわからん ([[名無しさん]] [WEAK[2007-02-23 15:07:32 +00:00]]) [90] [CITE@ja[やめよう、CSSのシステムデフォルトフォント指定 - Chienomi]], [[Masaki Haruka]], [TIME[2025-04-20T03:42:34.000Z]], [TIME[2025-06-19T14:43:11.627Z]] [FIG(quote)[ [FIGCAPTION[ [79] ([TIME[2015-07-10 16:34:31 +09:00]] 版) ]FIGCAPTION] > ]FIG] * 関連 [SEE[ [[フォント依存符号化]] ]] [SEE[ [[]] ]] [SEE[ [[外字]] ]] * メモ [3] Word 9, 10 は [CODE(CSS)[font-family]] のほか、 [CODE(CSS)[mso-[VAR[*]]-font-family]] を大量に指定してみたり、 [CODE(CSS)[@[[font-face]]]] 規則でフォントの詳細を指定してみたりしますが、 Excel 9, 10 は単純に [SAMP(CSS)[font-family:"MS Gothic", monospace;]] のようにフォント名と総称名を指定するだけです。 [SAMP(CSS)[[[mso-font-charset]]]] (Word では [CODE(CSS)[@font-face]] で指定) も一緒に指定されています。 ([[名無しさん]] [sage]) [4] [CITE[標準以外の日本語フォント / もうパンツはかない]] [CITE[CSSで使われるフォント / もうパンツはかない]] [5] [CITE[等幅フォントのリストとサンプル]] ([[名無しさん]] [WEAK[2005-05-04 08:17:04 +00:00]]) [6] [CITE[Travellers Tale: スタイルシートでのフォントの名前]] ([[名無しさん]] [WEAK[2006-01-06 02:59:07 +00:00]]) [8] [CITE[hail2u.net - Weblog - CSSで指定するフォント]] ([[名無しさん]] [WEAK[2006-09-19 02:22:57 +00:00]]) [11] [CITE[Hatena::agenda - CSS font-familyプロパティについて一言]] ([CODE[2007-05-21 21:08:28 +09:00]] 版) ([[名無しさん]] [WEAK[2007-05-25 00:33:52 +00:00]]) [12] [CITE@ja[Win Safariで日本語フォントを指定する方法β | Blog hamashun.com]] ([CODE[2007-06-12 11:17:50 +09:00]] 版) ([[名無しさん]] [WEAK[2007-06-12 12:24:45 +00:00]]) [13] [CITE[Linux版Operaのギザギザフォント解消:メモランダム]] ([CODE[2007-06-28 00:28:33 +09:00]] 版) ([[名無しさん]] [WEAK[2007-06-29 13:42:28 +00:00]]) [14] [CITE@ja[Shishimushi - font-family:]] ([CODE[2007-10-18 21:36:52 +09:00]] 版) ([[名無しさん]]) [63] [CITE@en-US[JavaScript / CSS Font Detector - Detect fonts available in a browser | lalit.org]] ([TIME[2010-05-11 19:40:09 +09:00]] 版) [64] [CITE[Basic Data Types and Interfaces – SVG 1.1 (Second Edition)]] ( ([TIME[2011-08-10 12:35:27 +09:00]] 版)) [66] [CITE@en[WICD Core 1.0]] ( ([TIME[2010-08-17 16:51:00 +09:00]] 版)) [69] [CITE[''''''[''''''whatwg'''''']'''''' font security on measureText]] ( ([TIME[2013-06-08 10:33:34 +09:00]] 版)) [75] [CITE[Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ | OXY NOTES]] ( ([TIME[2014-01-16 02:55:15 +09:00]] 版)) [76] [CITE[OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema]] ([TIME[2011-09-29 13:00:00 +09:00]] 版) [77] [CITE[IRC logs: freenode / #whatwg / 20150221]] ([TIME[2015-02-22 12:07:15 +09:00]] 版) [78] [CITE[くたばれ"Helvetica Neue"と腹が立って作ったブックマークレット - Qiita]] ([TIME[2015-05-15 15:31:30 +09:00]] 版) [82] [CITE@ja[Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる | WWW WATCH]] ([TIME[2016-06-30 00:51:56 +09:00]]) [84] [CITE@en[Rename CSSFontFaceValue.fontFaceName to fontFamilyName (#323)]] ([[wilddamon]]著, [TIME[2017-01-03 09:13:20 +09:00]]) [85] [CITE@en['''['''css-fonts-4''']''' Migrate font-family property from css-fonts-3]] ([[litherum]]著, [TIME[2017-03-09 09:41:08 +09:00]])