アクセシビリティの祭典のセッション4『私たち企業がアクセシビリティに取り組む理由~Webフォント編~』でライトニングトークを担当しましたFONTPLUS(ソフトバンク・テクノロジー)の関口浩之です。ご清聴いただき、ありがとうございました。
「日本語Webフォント最新トレンド」のスライドを掲載しましたのでご査収ください。Webフォントに興味のある方は、「FONPLUS導入ガイド」もご参考にしてください。無料トライアル版もありますので、ぜひ、お試しください。
『日本語Webフォントって遅いよね…』と思っている方、多いのではないでしょうか。たしかに3年前までは表示がとても遅かったです。現在のFONTPLUSはとても高速です。新旧比較動画で実際の速度をお確かめください。左側iPadがサービス開始当初のFONTPLUS、右側iPadが現在のFONTPLUSの表示速度です。同一HTMLページで新旧速度を比較しています。
FONTPLUS新旧速度比較
以下は技術情報です。FONPLUSではJavaSscriptタグの拡張パラメータを各種、用意しました。システムフォントのチラツキ防止の[Webフォント表示パターン]設定、二種類の[文字詰め]機能などです。なお、ピンポイント文字詰め(プロポーショナルメトリクス)は後述のfont-familyセレクタをご活用ください。
■FONTPLUS JavaScriptのオプションパラメータ一覧
表示スタイル:(システムフォントのチラツキが気になる際はお試しください)
delay=1
(1 or 2)
1: Webフォント適用個所のみ非表示にする
2: Webサイト全体を非表示
文字間の余白削除:(IE8~IE6でも文字詰めしたい場合にご活用ください)
t=0
(0のみを利用 pm=1と一緒に利用できません)
プロポーショナルメトリクス:(ページすべてのWebフォント要素を一括指定)
pm=1
(1以外の場合はパラメータなしと同じ t=0と一緒に利用できません)
Webフォント適用のタイムアウト時間:
timeout=1
(正の整数値 単位:秒)
表示位置ズレの自動調整:
aa=1
(1以外の場合はパラメータなしと同じ)
行サイズ切替機能:
ab=2 Windows仕様に合わせる
ab=1 Max OS X仕様に合わせる
■Webフォント表示テストツール
表示テストツール(1~50ピクセル一括表示)
表示したい文字列を入力します。そしてfont-familyを入力し[更新]ボタンを押してください。font-family名は、FONTPLUSで使える886書体リスト(xls形式)をご用意しましたのでご活用ください。ピンポイント文字詰め機能が使える書体はH列に○が付いた書体です。また○が付いた書体はWindows環境でもフォントがスムーズに表示されるよう配信しています。
■ピンポイント文字詰め機能(新機能)
JavaScriptタグに&pm=1を記述すると、そのページのWebフォントすべてが文字詰めされます。特定部分の文字列のみ文字詰めしたい(例:見出しはツメて本文はツメない)という要望にお応えし、ピンポイント文字詰めも追加リリースしました。
FONTPLUSの文字詰め機能が進化しました
■FONTPLUS無償API(スマートライセンス用)
非同期コンテンツなどに対応するために、FONTPLUSでは無償で各種APIを公開しています。コンテンツの用途にあわせて、こちらもご利用ください。
FONTPLUS無償API