Font-Familyの推奨事項

font-familyの推奨事項 ドラフト: 2026-05-09開始 • タグ付き /css, /opinions 1. 名前付きフォントが機能すると決して仮定しない ウェブセーフフォントというものは存在しません。すべての主要なプラットフォームで利用できるフォントはありません。ウェブフォント（@font-faceなど）も安全ではありません。 インライン化されていない場合、サブリソースはあらゆる種類のネットワーク上の理由で読み込みに失敗する可能性があります。 フォントの読み込みはセキュリティ上の懸念事項であるため、安全のためにブロックする人もいます。uBlock Originには、リモートフォントを無効にする専用ボタンがあります。一部のブラウザのデータ節約モードではフォントの読み込みをブロックすると思います。（そして、そうでないブラウザもそうすべきです。） または、ユーザーがウェブサイトに独自のフォントを選択させないことを選択しているかもしれません。私は2020年からそうしていますが、それによってウェブははるかに良くなりました。私にとって、汎用ファミリーだけが機能するものです。 関連するJSの1つ：document.fonts.load("1em my-web-font")を使用する場合、それが失敗する可能性があることを覚えておいてください。返されるプロミスが拒否される可能性があります。2020年から2025年の6年間で、この理由で壊れたものを4つほど見かけました（そのうち2つは2025年でした）。 さて、これの結果としていくつかのことがあります。 a) テキストをモノスペースにしたい場合は、必ずmonospaceを含める これは時々忘れられているのを見かけます。その欠如はほとんどの人に影響しないからです。正当な理由もなくページ全体がモノスペースだったページでは、正直なところ、それがページをより良くしていました！しかし、他の場合は物事を損ないます。 具体的な例として、この記事の執筆時点では、Adel Faure氏のASCII might fly?の作品はmonospaceが欠けており、私にはこんな風に見えます。 （あなたのスタイルやユーザーエージェントがモノスペースにしていないと仮定して！） . . . . _.---._ . . . . . . . . . '-. . . . . . . . . . . . . :.:.:.:.:.\. . . . . __ . . . . . . :.:.:.:.:.:'-.------------_.-'..'-.----------------------- _:.:.:.:.:.:.:\--._____.-'.:.:.:.:.\-.__:::::::::::::::::: .'-.::.::.::.::'-._'-._____::..:.:.:.:'-:-.-..._:.__:.:.:. -.-.\::.:::.::::::::::__::::(._____:.::.:::.::::'-.:=-.. . .-.-.'--.___:.::::.:::::::( '.--._''':.::::::::::::____.- -. -.'---.::::::::::'-. )::::::::::::_.-----'.-.-.- .^.-.-.-.-.-.-. \:::::::____TT_____.______'-.-.::.::.-._. / \::.:^:.:______.^-----/_-_ -_/\[-.-]/__/\[__\]::^:.^::.-..:: / \ / \_/-_-_- /\_\___/__/\[/_/ \__|LL LL|-/ \/ \( ).^ ._\..____/______/LL\___|LL__LL| /___/\ LL|_______( ^ / )__/____|LL LL|LL|L L|LL||LL| |L L||--___/\______\./ \. /\__|____|LL__LL|_________===_______---/\___\[LL__LL| / \ ^ ||/\-_-_-\LL||L/____/____/\ /-_-_- /\||______||LL|:/_\/ :/__\_____\___=|L L |L L ||/______/LL\ /_-_-_-/\ .::::|'/ -||||L L/____/\__==_______-|LL||LL| |/______/ \i-i-i-i/_ 7 - - --|L /\____\/\-_-_-_\==_""--""= |LL__LL| |: : : :L| フォールバックのmonospaceを追加してください。 pre { font-family: "jgs", monospace; } 実際、最後の点を「常に汎用ファミリーを含める」と書こうと思っていましたが、実際にはmonospaceにとってのみ重要です。それでも— b) その種のフォールバックフォントが必要な場合は、serifまたはsans-serifを含める serifまたはsans-serifが重要であることはめったにありませんが、それでもどちらかを含めておいた方が良いでしょう。 font-family: Arial, sans-serif; font-family: Times New Roman, serif; そうしないと、デフォルトのフォントが使用されます。それはおそらくserifですが、まったく別のフォントである可能性もあります。 2. システムにインストールされている可能性のあるフォントを列挙するのをやめる 私はこのようなものをたくさん見てきました。 font-family: "Arial", Helvetica, 'Helvetica Neue', Liberation Sans, "Noto Sans", sans-serif; Google Sans, Roboto, Arial, sans-serif 間違いなくArialは捨ててください：sans-serifよりも良くなることはありません。Robotoも捨ててください：ほとんどの場合そうではありません。役に立ちません。sans-serifは、あなたが指定したフォントよりも悪くないフォントに解決され、おそらくそれよりも良いでしょう。 これは私がちょうど見つけた実際の例です（句読点の後にスペースを復元しました、なぜならそれはミニファイされていたからです）。 font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Mono, Courier New, monospace, serif これは馬鹿げており、font-family: monospace, monospace;よりも厳密に悪いです。monospaceは、それより悪くないフォントに解決されます。 今、私はそれが決して当てはまらないとは言っていません。MicrosoftのCore fonts for the WebのserifフォントであるGeorgiaとTimes New Romanを考えてみてください。しかし、それらはかなり異なる特徴を持っています：Georgiaはかなり幅広です。もしあなたがスタイルの理由でそれを望むなら、font-family: Georgia, serif;を非難することはありません。 a) 名前付きの、ウェブフォントではないフォントは最大1つにする これは例外です MicrosoftのCore fonts for the WebのserifフォントであるGeorgiaとTimes New Romanを考えてみてください。しかし、それらはかなり異なる特徴を持っています：Georgiaはかなり幅広です。もしあなたがスタイルの理由でそれを望むなら、font-family: Georgia, serif;を非難することはありません。 modernfontstacks.comは興味深いサイトです。彼らのリポジトリには、どのプラットフォームにどのフォントを使うかについての詳細が記述されています。興味深いアイデアですが、賢明な範囲を超えて規定しようとしていると思いますし、指定されているフォントのかなりの部分が削除された方が良いでしょう。また、彼らはCourier Newを非常に、そして壊滅的に誤って扱っています。どうやら彼らの画像はmacOSのCourierで作成されたようです。 3. 汎用ファミリーのみを使用することを強く検討する システムにインストールされているフォントは役に立たないとして削除したとしましょう。では、ウェブフォントはどうでしょうか？ウェブフォントはウェブフォントなしよりも遅いです。そして、読み込みに問題が発生する可能性があります。そこでfont-displayが登場しました。しかし実際には、ブロック期間やスワップ期間、再描画、リフローのトレードオフについてあれこれ悩むのではなく、ユーザーが持っているフォントをそのまま使ってはどうでしょうか？それほど悪くはないでしょう。ユーザー自身がフォントを選んでいるかもしれません。考えてみてください。 a) はい、モノスペースであっても 歴史的に、モノスペースのデフォルトはひどいものでした。これは主にMicrosoftの責任で、あのひどいCourier Newを使用しました。これはデジタル化が悪く、実質的に400ウェイトではなく200〜250ウェイトでした。その後、AppleがMenloを導入し、人々はそれを気に入ったため、ブラウザベンダーがmonospaceを更新しなかったため、人々はそれをフォントスタックに入れ始めました。そしてそれは続きました。しかし、その時代は過ぎ去りました。ブラウザのデフォルトはすべて良くなりました。すべてのケースでまだ素晴らしいとは言えないかもしれませんが、もはや悪くはありません。だからMenlo、Monaco、Consolas、Bitstream Vera Sans Mono、Courier、Courier Newを削除し、monospaceだけを残してみてください。これは私がちょうど見つけた実際の宣言です（スペースが句読点の後に加えられています。ミニファイされていました）。 font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif もしあなたが意図的にCourier Newをフォントスタックに入れたことがあるなら、私たち友達になれるかどうかわかりません。 b) 実際には、monospace, monospaceと書く ブラウザの歴史における醜い部分で、私が知る限りどの仕様にも文書化されていないようですが、その時代の誰もが覚えています。font-family: monospace;（明示的または暗黙的に）を使用すると、font-sizeは100%ではなく81.25%にデフォルト設定される可能性があります。（ユーザーは汎用フォント、基本フォントサイズ、および基本モノスペースフォントサイズを変更できます。）リストに2番目のファミリーがある場合、これは起こりません。したがってfont-family: my-web-font, monospace;は問題ありませんし、font-family: monospace, monospace;も問題ありません。または、必要に応じてfont-sizeを手動で設定してください。 Lightning CSSを使用している場合、monospace, monospace;を台無しにするので、今のところ私はmonospace, mと書いています。これはmonospaceのみに影響します。そして、言語を変更するテキストにも影響するかもしれませんが、それはまた別の話です。ブラウザメーカーにmonospaceのサイズ設定をやめさせ、おそらく13pxからおそらく16pxに増やすよう説得できるか見てみたいです。CSSWGが提案する場になると思います。 4. system-uiやui-*をコンテンツに使用しない UIフォントは短いUIテキスト用に設計されており、長文コンテンツ用ではありません。UIフォントはコンテンツの言語をうまくサポートしない可能性があります。macOSは得意ですが、Windowsはそうではなく、CJKユーザーは悪いモノスペースフォントを取得するようなことになります。時には、人々は意図的にばかげたシステムUIフォントを選んでいることさえあります。一部のAndroidサークルでは非常に一般的です。system-uiはコンテンツもばかげたものにするだろうと推測しています。 w3c/csswg-drafts issue #3658では、いくつかの問題が議論されており、system-uiが広範囲に悪用されていると結論付けられています。m