ソフトバンク・テクノロジーの関口浩之です。「日本語Webフォント基礎講座」のスライドと「FONPLUS導入ガイド」を掲載しました。
日本語Webフォントをまだ使ったことがない方は、まずはFONPLUS無料トライアル版をお試しください。導入ガイドをご覧いただけば、だれでも30分で日本語Webフォントを体験できます。
■FONTPLUSのピンポイント文字詰め機能
FONTPLUSでは、皆様からのご要望にお応えして、ピンポイント文字詰め配信の機能を2015年10月にリリースしました。下記3パターンのサンプルで見比べてください。
見出しも本文もベタ組み … 括弧や中黒などの約物がパラパラしてて読みづらい
見出しも本文も文字詰め配信 … 見出しは読みやすくなったけど、本文も詰めるとビジー感がでて読みづらい
見出しのみ文字詰め配信 … 見出しのみ文字詰めするのがバランスが良い
■Webフォントの表示速度比較動画
次に日本語Webフォントの表示速度のお話です。「日本語Webフォントって遅いし重いよね」と思っている方、まだ多いのではないでしょうか? たしかに3年前までは表示がとても遅かったです。現在のFONTPLUSはすっごく高速です。新旧比較動画で実際の速度をお確かめください。左側iPadがサービス開始当初のFONTPLUS、右側iPadが現在のFONTPLUSの表示速度です。同一HTMLページで新旧速度を比較しています。右側(現行のFONTPLUS)の表示では、Webフォントを導入している感じがしないぐらいの表示速度になっていませんか。
FONTPLUS新旧速度比較
■Webフォント表示テストツール
表示テストツール(1~50ピクセル一括表示)
表示したい文字列を入力します。そしてfont-familyを入力し[更新]ボタンを押してください。font-family名は、FONTPLUSで使える886書体リスト(xls形式)をご用意しましたのでご活用ください。ピンポイント文字詰め機能が使える書体はH列に○が付いた書体です。また○が付いた書体はWindows環境でもフォントがスムーズに表示されるよう配信しています。font-familyの後ろに{pm}セレクター付けると文字詰めして表示されます。
■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仕様に合わせる
■FONTPLUS無償API(スマートライセンス用)
非同期コンテンツなどに対応するために、FONTPLUSでは無償で各種APIを公開しています。コンテンツの用途にあわせて、こちらもご利用ください。
FONTPLUS無償API