2015年3月5日開催「HTML5fun」で日本語Webフォント最新事情のショートセッションを担当した関口浩之です。ご参加いただきありがとうございました。10分では語り尽くせなかったのでフルバージョンのスライド(全55頁)を共有しますのでご一読いただけるとうれしいです。また、Webフォント導入ガイドもアップしましたのでFONTPLUS導入検討の際はダウンロードしてご活用ください。
以下でFONTPLUSのTIPSも共有します。FONPLUSではJavaScriptタグに拡張パラメータをご用意しました。Webフォント表示パターン設定、タイムアウト設定、文字詰め機能などです。表示パターン設定[パラメータなし / &delay=1 / &delay=2]はステージング環境で表示の挙動を比較検討してみてください。詳しくは導入ガイドの3~5ページをご参照ください。
■FONTPLUSタグのオプションパラメータ一覧
Webフォント適用のタイムアウト時間:
timeout=1
(正の整数値 単位:秒)
表示スタイル:
delay=1
(1 or 2)
1: Webフォント適用個所のみ非表示にするv
2: Webサイト全体を非表示
表示位置ズレの自動調整:
aa=1
(1以外の場合はパラメータなしと同じ)
プロポーショナルメトリクス:
pm=1
(1以外の場合はパラメータなしと同じ t=0と一緒に利用できません)
文字間の余白削除:
t=0
(0のみを利用 pm=1と一緒に利用できません)
■Webフォント表示テストツールのご案内
表示テストツール(1~50ピクセル一括表示)
表示させたい文字列とfont-family名を入力し、[更新]ボタンを押してください。ご参考までに、58書体font-family名リスト(xlsx形式)をご用意しましたのでダウンロードしてご活用ください。761体の中から人気書体58フォントをチョイスしました。全761書体のfont-family名を調べる際はFONTPLUS会員ログインし書体一覧でご確認ください。※書体数は2015年3月5日時点
フォントのアンチエイリアス処理は閲覧環境(プラットフォーム×OS×ブラウザ)で異なります。Mac OS/iOSやAndoroid環境ではどの書体でも比較的綺麗に表示されますがWindowsマシンでは10~20ピクセルの表示品質は書体によってバラつきがでる場合があります。斜め線などで差がでる傾向があります。実際にいくつかの環境でお確かめください。
正直なお話、Windows XP環境ではアンチエイリアス処理が残念でしたが、Windows7以降の環境ではだいぶ改善されました。さらに、IGZO(2560x1440)や4K(3840×2160)の高精細ディスプレイのWindowsパソコンが発売開始されました。IGZO液晶搭載のWindowsマシンでWebフォント表示したら、Mac Retinaディスプレイ同様に綺麗でした。「Windowsマシンはフォント表示が残念」と言われない時代になりそうですね。横方向1600ドット以上のディスプレイであればInternet Exploreでもアンチエイリアス処理が綺麗です。
■活字と文字のミニ情報
鋳造活字やデジタルフォントで有名な株式会社モトヤさんの活字資料館と丸明オールドで有名なカタオカデザインワークス書体設計家の片岡朗さんのアトリエを訪問した際の写真を公開しました。文字がお好きな皆さん、こちらもお楽しみください!
カタオカデザインワークス様の書体設計アトリエ
モトヤ様の活字資料館