序ウェブをブラウジングしていると、嫌というほど見る無意味にひたすらシステムフォントを列挙している同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定するという苦痛極まりないフォント指定をしているCSSをよく見かける。ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。フォントの指定に無知が見える」という批判をしてきたが、次に確認したとき(去年である)には多くのサイトがそのような指定を解消していた。今改めて確認すると、そのような「無意味なフォント指定」は大手サイトから消え去っていた。して個人サイトやブログ、さらに言えばウェブ制作を語るようなページに至るまで、無意味かつ傲慢なフォント指定のCSSは溢れている。震源地となった大手サイトが悔い改めたのだから、そのようなことをしている製作者は直ちに心を入れ替えるべきだろう。確認したのは2019-10-29である。1.6;}以下はややアウト。62.5%;}私が怒っている類の指定。Neue,Helvetica,Arial,sans-serif;}不公平感がないように、うちのも出しておこう。family-name...];この動作は一般的には次のようなものだ。Braveを含む)及びFirefoxの挙動であり、Dilloなんかは全く違う挙動を示す。注意点がいくつかある。PGothicを要求する。Pゴシックを要求することはないと考えれられる。この挙動にはいくつか理由がある。第一には、Windowsがこうした論理フォントの定義ができないため、必須の機能とならないということが挙げられる。第二に、FontConfigはデフォルトで「単一のフォントが要求されたときにグリフを埋められるように」大量のフォントを返すようになっているので、assignしないとまず間違いなく最初に一致したフォントで描画できる。CSSには複数のフォントを適用する機能があるということだ。これはもちろん、物理フォントが小さいセットから順に要求することで言語ごとに異なるフォントを表示させるという用法もあるが、unicode-rangeを使って明示することもできる。最後に適用されるデフォルトフォントについてだ。fontのことであり、sans-serifのことではない。いえば、この最終段階では最初にマッチするフォントだけを使用するルールを変更し、可能な限り表示できるようにする。FontConfigを使用しているシステムであれば同名のフォントの定義が存在するか否かによらずフォントのリストにある全てのフォントを試す。このあたりのルールは複雑であり、この段階にきた場合は「システムにグリフを持つフォントがあれば表示できる、何によって表示されるかは制御できない」が正しい説明になるだろう。大きいセットを先に指定する愚かしさ次の例を見てみよう。Pゴシックを適用する。Pゴシックを適用し、不足するグリフがあればArialを適用する。Pゴシックが存在する環境でArialの指定が意味をもつことはありえない。この指定に全く意味がないかというとそうでもない。Pゴシックがないから、最低限Arialは適用されるはずだ。意味があるかどうかということと、適切であるかどうかということは全くの別問題である。あなたがArialは新しい幾多のフォントの中で圧倒的に素晴らしいと考えているのであればもしかしたら良いかもしれないが、sans-serifがどのようなデザインを持ったフォントであるか予測することができないからである。Arialの英字が適用されることで、デザイン的に全くマッチしない可能性は低くない。次の指定はどうだろうか。sans-serif;この場合、Windows環境でArialが適用されることは考えられないので、Arial及びヒラギノ角ゴシックはMac向けの指定だと考えられる。ヒラギノ角ゴシックはやや細めで行も高く、文字間も広いフォントなので、英字に関しては黒めで詰めた文字のほうが美しい、という感覚があるのであれば、まぁわからないではない。次の指定はどうだろうか。sans-serif;困ったことに非常によく見る指定である。この場合、Windowsの日本語フォントとMacの日本語フォントを指定しているわけだが、それらが存在する環境ではArialが使われることはない。それらが存在しない環境とはなにか。ひとつには、Windows、あるいはMacで日本語フォントを導入していない環境が考えられる。Macで追加フォントを入れていない環境というのも考えられるのだが、それはこのようなCSSを書いている人がヒラギノが追加フォントであることに反発を見せていることを考えるとその環境は想定していないのだろう。あれば、欧文環境向けにArialというのはわからなくはない。適切な表記ではないが。12しかし、実際そんなことはないのではないだろうか。日本語を前提としたウェブサイトであるならば、このような指定は無意味極まりない。望んだ環境ではArialが採用されることはないのだ。ひとつは、WindowsでもMacでもない環境だ。Pゴシックも、ヒラギノ角ゴシックも、Arialもない。Sansとか)けれども、それを望んでいるのだろうか。メトリック互換であることは、あくまでもメトリック互換という以上の意味を持たないが、厳密にピクセル数を計算できるようなUI部品上でArialを要求しているのだろうか。するならば、日本語フォントを先に指定していることで表示崩れは不可避だろう。論理フォント名についてCSS上ではジェネリックなフォント名としてsans-serifserifmonospacefantasycursiveの5つが指定できる。このうち、実際にシステム的にジェネリックなフォント名として通用するのはsans-serifserifmonospaceの3つだけで、fantasyやcursiveという論理フォントが存在するとは限らない。指定意図としては曖昧に「サンセリフ体」「セリフ体」などと指定しているわけだが、これが強制されるわけではない。最近はserifと指定してもセリフ体(明朝体)にはならないケースが増えている。WindowsもMacもこれらの抽象フォントは適切に処理されるが、Windowsの場合こうした抽象フォントを設定する方法がない。Firefoxともにシステムの選択に依存せず、自前でフォントを選択するようになっている。当初フォント設定がなかったBraveもChromiumと同じ設定を使うようになった。Chromiumは現実的にfantasyやcursiveが全く使われていない状況を反映してか、これらのフォントは設定できなくなっている。表示を確認するまずは知識を持ち、現実を見る大きく表示しないとわからないだろうから、画像クリックでオリジナルサイズのものを見たほうがよいだろう。非常に大きな画像(6MB)である。1Cさざなみゴシック東風ゴシック小杉ゴシックである。一応、説明すると次のようになる。Windowsの歴史ある標準フォント。Xに搭載されてきたモダンなデザインを持つ商用フォント。新しい、人気のあるフリーフォント。Macに搭載されていた商用フォント。Vistaから搭載される丸ゴシック。新しいスタンダードなグリフの長体角ゴシック体。独立行政法人IPAが日本語文書のために制作したフリー書体。Projectの成果物の一部であるフリー書体。Linuxにおける標準日本語フォントとして使われてきた東風ゴシックを置き換えるフォント。2003年頃までLinux/Unixシステムの日本語フォントとして標準的に使われていたフォント。Fontsで公開されている。参考商用フォントつまり、いずれも環境によって標準フォントとなりえるものである。Osakaを入れたかったのだが、私はMacユーザーではないため、Osakaのオリジナル版を持っていないから。Migu角ゴシック体でモダンなものは、払いを細く表現したり、グリフのボックスをフルに使うような丸みがあったりとやわらかい印象になっているのが特徴的。した特徴は、さらに新しいUDゴシック系になるとより際立つ。(コンピュータに限らないUIフォントのトレンドとしては、伝統的角ゴシックからモダンなゴシックになり、丸ゴシックを経て現在はUDゴシックになっている)フォントにまるで関心のない人からすれば同じように見えるかもしれないが、実際のところUIなどで表示が変わると誰もが印象を変えるものではある。フォントのカテゴリが変わるとさすがに感じるものがある。LinuxではUIがさざなみからVLゴシック、あるいはM+/Migu(当時はM+IPA+Gという名前)に切り替わったときなど、どこのディストリビューションのユーザーコミュニティでもまぁまぁ話題になった。あるならば、フォントのグリフデザインコンセプトの違いには敏感なはずだ。Pゴシックとヒラギノ角ゴシックのデザインが全く逆方向にあることを理解できないとは思えない。いうよりも、もしそんなデザイナーがいたならば、私はその人のことを全く信用できない。sans-serif;はわかる。「あぁ、モダンデザインのフォントを使ってほしいんだな」と。sans-serif;というのもわかる。ここはかっちりとしたトラディショナルなゴシック体がほしいんだな、と理解する。sans-serif;なんて指定をされたら、デザインのことを考えているとは微塵も思えない。その書体がどのようなコンセプトでデザインされ、そのフォントがどのような印象を与えるか、というのが、指定されているフォントがまるで反するものを一緒にしているからだ。グリフサイズで比較する画像において、それぞれ縦の長さが異なるが、個々の画像の幅(=画面幅)は一定なので(テーブルのはみ出た分は除く)、グリフの空間が広い(文字間であれ行間であれ)と縦長になり、詰めているフォントだと短くなる。5541ということである。縦長の游ゴシックだが、これはフォントが長体でグリフに高さがある上に、行間も広いためで、一行に何文字書けているか、ということを見ると幅では小杉ゴシックとヒラギノ角ゴシックが最も幅をとっている。游ゴシックの幅は割と標準的だ。Pゴシック」「平成ゴシック」の3つに関しては非常に詰まった印象が強く、黒々としている。Pゴシックは最も字間・行間ともに詰まっていてグリフも密な類であり、逆にヒラギノ角ゴシックは字間・行間とも非常に広い部類に入るので、この両方がレイアウト上望ましいということはありえない。Pゴシックの詰まりっぷりはArialと同様で、代替を探すのが難しいくらい密である。日本語フォントとしてはぎっちぎちと言っていい。Pゴシックよりもぎっちぎちである。Pゴシックを意識しているのだと思うが)対してヒラギノ角ゴシックは、「行間が広い」という批判もある源ノ角ゴシックよりも行間は広い。ゆとりあるデザインだ。レイアウト的に考えても、この両方を指定するというのは理屈に合わないし、無理がありすぎる。テキストのデザインとして、まともに読めないデザインをするデザイナーにどれだけの価値があるのか。webのデザインというのが厳密には制御できず、「なり」であることを前提としている、というあたりから勉強し直したほうが良いのではないか。いうよりも、じゃあ他のメトリクスではどのように問題で、それらのメトリクスではどう問題ではないのか、ということも聞きたいし、じゃあWindowsにヒラギノ角ゴシックが入っていたらレンダラの違いによって異なる表示がされることについてはどうなのか、とも思う。レイアウト的な理由から言っても両方指定というのはセンスが死んでいる。いうか、センスが死んでいるで済めばまだよくて、ウェブ上のフォントについてまともに勉強すれば「フォントに指定でレイアウトを強制するのは現実的なことではない」ということは結構すぐわかることだし、「特定のフォントが入っていることを前提としたレイアウトはしてはならない」ということもすぐわかることなので、知識や意欲や努力の問題として疑われることとなるだろう。この問題は英文の場合は全く違った話であるということを理解しておかなければならない。Helveticaは1957年に誕生したフォントであり、Arialは1982年にHelveticaの代替(互換)フォントとして誕生した。ArialはHelveticaとメトリック互換であり、字形は少し異なる。721というHelvetica代替フォントも存在するが、こちらは字形は似ているがメトリックが少し異なる。SansはメトリクスがHelveticaの互換である。BitmapフォントのM+hlvなど、Helvaticaの互換フォントというのはたくさん作られた。