はじめに
ここでは、ウェブページのフォントの試験を行います。試験はそれぞれの環境に依存しますので、それらの結果等はあまり言及せず、ここでは試料を提供することそのものを目的とします。
例示に使用しているフォントがシステムにインストールされてないと通常は代替フォントで表示されますが、ここでは何も表示されないようになっています。
システムに同梱もしくはアプリケーションによりインストール済みが期待されるフォントも多く扱っています。
それ以外は、オープンソースのフォントを取り上げ、必要に応じてインストールして頂くかウェブフォントとして扱われることになっています。
これらフォントの試料を極力正確に視認するのに役立つ、ブラウザの支援機構を紹介します。Chrome と Safari なら拡張機能である「WHATFONT」をブラウザにインストールすると利用できます。Firefox の場合は、同サイトで、ブックマークレットとして提供されています。これを使うと、実際に表示されているフォントが何か、マウスポインタでかざせば分かるようになります。
さらに、prefbar の拙作の書体関連ボタンで既定のフォントを変更したりすると、書体の変更が素早く簡単です。
ところで、例示のグリッドはスマホだとなぜかずれます。「書体とグリッドの試験」だとずれないのですが…
この文章もフォントに依存した試料のひとつです。文字を小さくし、それに応じたインデントの深さとマーカーを表示しています。
右欄 Contents のアイテムをクリックするとこのページ内の所望のフォントの表示結果に移動します。
フォントファミリ概要
ユーザ試料の試験
⇥) か enter (⌤) で実行
このように好みのフォントファミリ名で、下記で行っているような試験結果を表示できます。代替フォントが AdobeBlank もしくは AND-Regular なので未定義グリフが確認できます。
既定の試料の試験結果
font-family 名は英語の方がよいようです。英語の Family 名を Mac で調べるには一時的に言語を英語優先にして、FontBook.app を起動します。終わったら忘れずに戻しておきましょう。
ちなみにこの文書は、以下のようにウェブフォント用の指示を読み込んでいます。やはり、読み込む速度が流石に遅すぎるので Google のウェブフォントは止めにしました。これらの様子を見たいときはローカルにこれらのフォントをインストールする必要があります。OSDN のウェブフォントはまさにその用途そのものなので残してあります。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=M+PLUS+1p"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kosugi+Maru"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kiwi+Maru"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kosugi"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shippori+Mincho"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shippori+Mincho+B1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dela+Gothic+One"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RocknRoll+One"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Reggae+One"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=DotGothic16"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Train+One"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Stick"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Potta+One"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Hachi+Maru+Pop"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Yusei+Magic"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=New+Tegomin"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+JP"> <!--link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/mplus1p.css"/--> <!--link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css"/--> <!--link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css"/--> <!--link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css"/--> <!--link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"/--> <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/hannari.css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/kokoro.css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nikukyu.css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nicomoji.css"/> <link rel="stylesheet" href="http://mplus-fonts.osdn.jp/webfonts/basic_latin/mplus_webfonts.css"/> <link rel="stylesheet" href="http://mplus-fonts.osdn.jp/webfonts/multi_latin/mplus_webfonts.css"/> <link rel="stylesheet" href="http://mplus-fonts.osdn.jp/webfonts/general-j/mplus_webfonts.css"/>
Variable フォント試験
上記日本語を含むフォントを試していると、最先端の Variable フォント対応か否か確かめたくなると思います。例えば、オープンソースの「源ノ角ゴシック」が Variable 化されています。なんとデザイナー泣かせなことでしょう！？お気の毒に思う一方、自由度が広がり嬉しい限りです。それを試せる場を用意しました。
純粋に Variable フォントについて確かめたければ「RobotoFlex」フォントや「源ノ角ゴシック JP VF」フォントをインストール及び指定し、CSS style チェックを外して試してみるとよいと思います。
おわりに
ここで再認識したいのは、CJK のような大量で複雑な要求があるフォントで需要がある技術が欧米フォントにも適用され、Latin フォントでの自由度の広がりにも繋がっていることに気付かされます。Type1 フォント、Type0 フォント、CID-Keyed フォント、OpenType フォントのグローバルな変遷を我々はまさに体験しているわけです。元を辿れば、CID-Keyed フォントでは CMap によって euc-jp や Shift_JIS 延いては UTF-8 などの文字エンコーディングに対応、UCS-2 から UCS-4 で多くの人名も選べるようになり、Unicode 2 におけるハングル再定義の前例を超えて、日本のキャリア独自の絵文字なども Unicode に定義されるに至っています。そして、CJK 統合漢字の違和感から ISO-2022 で十分だと思っていた不勉強だった筆者は、確かにステートレスな UTF-8 などのエンコーディングの価値は既に理解しています。UCS-4 サロゲートペアなどは EUC や Shift_JIS と概念はさほど変わらないけど、UTF-8 で被せれば 7 ビット領域は従来通り何も気にせず処理できる便利さを思い知ります。そして、巡り巡って数式で必要な「イタリック」などはフォントのスタイルでしかなかった属性が今や Unicode のコードポイントにギリシャ文字も含めて定義されているというのだから驚きを禁じえません。