日 本 語 Webフォントサービス FONTPLUS 導 入 ガイド & 技 術 情 報 ソフトバンク テクノロジー 株 式 会 社 2015 年 3 月 10 日 第 9.2 版 1
目 次 本 書 は 日 本 語 Webフォント FONTPLUS の 会 員 向 け 導 入 ガイドです FONTPLUSの 導 入 方 法 と Webフォントの 基 本 概 念 を1 時 間 程 度 で 習 得 してい ただくために 作 成 いたしました Webフォントの 基 本 概 念 をご 理 解 したい 方 はまず15~16ページをご 一 読 ください また18ページ 以 降 で 技 術 情 報 を 掲 載 いたしましたのでご 活 用 ください ご 注 意 本 書 は 正 式 会 員 向 けのユーザガイドです 無 料 トライアル ユーザ 様 は ブルー 色 の[ログイン]ボタンでは なく オレンジ 系 の[ 無 料 トライアルでログイン]ボタンをご 利 用 ください 無 料 トライアルユーザ 様 はそのあたりを 読 み 替 えて 本 書 をご 活 用 ください FONTPLUS 無 料 トライアル 版 では 使 用 できる 書 体 は12 書 体 FONTPLUSの 小 さなバッチが 表 示 等 の 制 限 がございます なお 無 料 トライアル 版 の 表 示 速 度 は 正 式 会 員 と 同 様 のパフォーマンスです FONTPLUS 導 入 ガイド 1. スマートライセンス 3ページ 2. バリューライセンス 9ページ 3. Webフォント 試 し 書 き 機 能 12ページ 付 録 1 Webフォントの 基 本 講 座 15ページ 技 術 情 報 Appendix1. 便 利 ツール Appendix2. 公 開 API(FONTPLUSスマートライセンス) Appendix3. Webフォント 活 用 デモモック Appendix4. FONTPLUSのブラウザ 対 応 表 18ページ 19ページ 20ページ 21ページ 2
スマートライセンス スマートライセンスの 導 入 方 法 をご 説 明 します スマートライセンスとバリューライセンスは 別 契 約 になります ( 注 )ほとんどの 日 本 語 Webフォントサービスは head 内 にJavaScriptタグを 記 述 するダイナミックサブセッティング 方 式 (スマートライセンス) スマートライセンスでは FONTPLUSのJavaScriptタグを 記 述 したhtmlファイルとWebフォントのfont-familyを プしてください FONTPLUSのスマートライセンスは 利 用 できるWebサイト(ドメイン)は 無 制 限 です 購 入 したPVチケット( 例 :600 万 PV=6 万 円 ) のPV 数 は 分 け 合 えます また 利 用 できる 書 体 数 も 制 限 ありません 2015 年 2 月 末 現 在 761 書 体 が 使 い 放 題 です 無 料 トライアル 版 では 利 用 できる 書 体 は12 書 体 利 用 できるPV 数 は5,000PV(6ヶ 月 間 有 効 )と 制 限 がありますが ドメイン 登 録 数 に 制 限 ありません FONTPLUS 料 トライアル 無 版 はこちら https://webfont.fontplus.jp/trial/terms 1[スマートライセンス]の[サイト 登 録 PVレポート]を 2[ 新 選 規 択 登 録 する]をクリック 登 録 ドメイン 毎 の 利 用 PV 状 況 も 随 時 確 認 できます 3FONTPLUSを 適 用 するサイトURLを 力 入 4サイト 登 録 確 認 画 面 が 表 示 されますので 登 録 してください 上 位 URLを 登 録 すると 下 位 ディレクトリも 有 効 になります 3
JavaScriptタグ 行 タイムアウト 発 時 間 設 定 Webフォントがリクエストされ(JSタグとfont-family 指 定 ) FONTPLUSサーバからWebフォントが 配 信 された 1[スマートライセンス]プルダウンで[スクリプト 行 ]を 選 択 します 発 2デフォルトのJSタグは 以 下 の 通 りです &aa-1 のパラメータは 表 示 位 置 ズレの 自 動 調 整 です 新 規 導 入 の 際 はそのまま ご 使 用 下 さい 詳 しくは 以 下 をご 参 照 ください https://webfont.fontplus.jp/faq/view/jlbbinmsb ~E%3D 3Webフォント 表 示 パターンは3 種 類 あります Webフォントを 適 用 する ページで 実 際 に3パターンを 試 して 閲 覧 環 境 のマシンスペックやブラウザによってWebフォン 最 も 最 適 なタグをご 利 用 することをおすすめします ト 表 示 挙 動 が 異 なる 場 合 があります また Webコンテ http://goo.gl/stxqog ポイント ンツ 構 成 によりWebフォントの 表 示 異 挙 なります 動 は 2013 年 秋 にスマートライセンスの 表 示 速 度 が 大 幅 に 改 善 された 後 は デフォルトのJavaScriptタグのままで http://goo.gl/cqc8l6 遅 いという 感 覚 はないと 思 います &dealy=1 パラメータ なお &dealy=1 や &dealy=2 パラメータを 使 用 すると システムフォントを 表 示 させない 制 御 ができるので http://goo.gl/zrvb08チラつきが 気 になる 際 はご 検 討 ください &dealy=2 パラメータ 実 際 のステージング 環 境 で3 種 類 の 表 示 パターン 比 較 を 是 非 行 ってみてください 4
スマートライセンスJavaScriptタグ 例 CSS 記 挿 述 入 例 ソースサンプル 表 例 示 HTMLとCSSの 記 述 イメージを 掲 載 いたします <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> HTML 記 例 述 <title>イギリス 湖 水 地 方 の 旅 日 記 </title> <link rel="stylesheet" href="style.css"> <script type= text/javascript src= http://webfont.fontplus.j script/fontplus.js?l2yhttfa8k0%3d&delay=2" http://goo.gl/2ra0i2 charset="utf-8"></ </head> <body> <div class="box_a"> <h1>イギリス 湖 水 地 方 の 旅 日 記 </h1> CSS 記 例 述 body { <div class="box_b"> font-family: 'F+UD-スーラ M'; <h2><a id="peter"> 度 は 訪 れてみたいピーターラビット 一 村 </a></h2> color: black; <img src="hilltop.jpg" alt="hill TOP" /><br> } <p class="msg"> 湖 水 地 方 (Lake District)は 自 然 な 景 観 と 古 風 な 町 並 みが 本 当 に 美 し h1 { } モック: font-family: 'NTモトヤstアポロ Std color: purple; スマートライセンスは 導 入 が 簡 単 ですが 閲 覧 デバイス 環 境 やブラウザ 環 境 Webコンテンツ 構 成 により システムフォント 表 チラつき 感 がでる 場 合 があります 2013 年 秋 にスマートライセンスの 高 速 化 後 は 標 準 タグでも 気 にならないケースもありますが 全 ページの 拡 張 パラメータも 是 非 ご 活 用 ください ポイント 同 一 ページ 内 で 使 用 するWebフォントの 書 体 数 が 多 いと 1 書 体 指 定 の 時 了 よりも までの 表 時 示 間 完 が 掛 かる 場 合 があります 非 同 期 コンテンツなどに 対 応 するためのスマートライセンスの 無 償 公 開 API(19ページ 掲 載 )も 活 用 ください 5
FONTPLUSのJavaScriptタグの 拡 張 パラメータ 一 覧 FONPLUSではJavaScriptタグの 拡 張 パラメータをいくつかご 用 意 しています [Webフォント 表 示 [ 文 字 詰 め] 機 能 などです デフォルトのJavaScriptタグに 拡 利 張 用 パラメータを ください 付 加 してご とりわけ 表 示 パターン 設 定 の &delay=1 または &delay=2 はステージング 環 境 で 表 示 の 挙 動 比 較 お 試 しください delayパラメータという 名 称 ですがページ 了 までの 読 時 み 間 込 は み 変 完 わりません FONTPLUSオプションパラメータ 一 覧 Webフォント 適 用 のタイムアウト 時 間 : timeout=1( 正 の 整 数 値 単 位 : 秒 ) 表 示 スタイル: delay=1(1 or 2) 1: Webフォント 適 用 個 所 のみ 非 表 示 にするv 2: Webサイト 全 体 を 非 表 示 表 示 位 置 ズレの 自 動 調 整 : aa=1 (1 以 外 の 場 合 はパラメータなしと 同 じ) 文 字 間 の 余 白 削 除 : t=0 (0のみを 利 用 pm=1と 一 緒 に 利 用 できません) プロポーショナルメトリクス: pm=1 (1 以 外 の 場 合 はパラメータなしと 同 じ t=0と 利 用 一 できません) 緒 に FONTPLUS 無 償 公 開 API(スマートライセンス 用 ) 非 同 期 コンテンツ 等 に 対 応 するため FONTPLUSでは 無 償 APIを 公 開 しています コンテンツに 利 用 ください 応 じてご FONTPLUS API 機 能 http://pr.fontplus.jp/api/ 説 明 6
文 字 詰 め 機 能 ( 新 機 能 )について 速 度 改 善 の 次 にご 要 望 の 多 かったWebフォントの 文 字 詰 め 機 能 を2014 年 1 月 にリリースしました 二 通 りの 方 式 があります 文 字 詰 めなし(デフォルト 設 定 /べた 詰 め) モック: http://goo.gl/yrkrbe 1 プロポーショナルメトリクス &pm=1 パラメータ モック: http://goo.gl/bmqjmq IE6~IE8ブラウザではプロポーショナルメトリクスは 動 作 しません (べた 詰 め 表 示 になります ) プロポーショナルメト 対 応 する 書 体 は 下 記 をご 参 照 ください フォントワークス モトヤ イワタ スクリーン DNP 等 の 主 な 書 体 は 対 応 しています http://goo.gl/1g2a0v プロポーショナルメトリクスの 詳 細 2 字 面 の 両 端 余 白 削 除 &t=0 パラメータ モック: http://goo.gl/fakjuo このアプローチ( 字 面 の 両 側 余 白 を 削 除 + letter-spacing 調 整 )にではIE8/7/6でも 文 字 詰 めが 機 能 しま letter-spacing: ( 例 :0.1em;l)で 調 整 してください 文 字 詰 め 機 能 の 詳 細 http://goo.gl/u8sxrv 7
メール 受 信 設 定 について [メール 受 信 設 定 ]で アラート&レポートの 受 信 者 の 追 加 各 種 メール 通 知 ONを 設 定 することをおすすめします 8
バリューライセンス FONTPLUSでは もうひとつの バリューライセンス 配 信 方 式 があります こちらはあらかじめ 必 要 列 な 文 書 字 体 のサブセット (Webフォント 形 式 )をお 客 様 のWebサーバへアップロードしておく 方 式 です FONTPLUS 理 画 面 にログインしてサブセットを 管 取 得 する 作 業 が 必 要 です この 方 式 ではWebページとFONTPLUS 間 の 通 信 は 発 生 しません 2013 年 秋 に スマートライセンス は 高 速 化 しました それまでには スマートライセンス に 比 べて バリューライセンス のほうがかなり 高 速 でしたが 現 在 では これら 二 つのライセンス 方 式 において 度 表 はほぼ 示 速 同 じになりました 前 述 の スマートライセンス はページ 単 位 でFONTPLUSサーバからサブセット(Webフォント)をダイナミックに 取 得 する 方 式 ですが 導 動 的 ページに 対 応 という 運 用 のしやすさがあり 現 在 お 申 し 込 みの9 割 以 上 がスマートライセンスをご 利 用 いただいています バリューライセンス サンプル: http://goo.gl/fsvgcu スマートライセンス サンプル: http://goo.gl/2ra0i2 バリューライセンスはキャンペーンページなど 更 新 頻 度 の 少 ないWebページなどでご 利 用 いただくことが 多 いです バリューライセンスは 年 間 360 万 PV までランニング 費 用 は12,000 円 /1ドメイン( 金 は 別 途 1 万 入 円 会 : 税 抜 )とお 手 軽 価 格 です ただし 手 動 でサブセットをアップロード ダウン ロードする 必 要 があります なお 文 字 列 とfont-familyをpostするとサブセットを 取 得 できるWebAPIをFONTPLUSエンタープライズ で 提 供 版 しています 詳 しくは お 問 い 合 わせください FONTPLUSサポート support@fontplus.jp 窓 口 サイト 登 録 (バリューライセンス) 契 約 期 間 中 は 管 理 画 面 にログインして 手 動 操 作 にてWebフォントのサブセット 取 得 を 何 回 でも 可 能 です 1[バリューライセンス]の[サイト 登 録 ]を 選 択 します 2[ 新 規 登 録 する]をクリックします 9
バリューライセンスのサブセット 手 順 あらかじめ 使 用 する 文 字 列 と 書 体 が 特 定 できる 場 合 は 事 前 に 必 要 なWebフォント(サブセット)を 公 開 サーバへ アップロードしてください 一 度 に 取 得 できる 文 字 数 には1,000 文 字 (ユニーク 文 字 数 )までとなります 数 千 文 字 の 長 文 テキストも 通 常 は ユニーク 文 字 数 で 計 算 すると 数 百 文 字 になります HTMLファイルとCSSファイルをZIP 化 したものをご 用 意 1[スマートライセンス]の[サブセット 化 ]を 選 択 2 適 用 するサイトURLを 選 択 し 変 換 するZIPファイルを 選 択 サイトURLを 選 択 ZIPファイルを 選 択 各 種 ブラウザに 対 応 するため 複 数 フォーマットの Webフォントが 格 納 されて 返 却 されます 10
たとえば htmlファイルとcssファイルをzip 化 したものを sample.zip とします sample.zip をバリューライセンスでサブセット 化 すると FONTPLUS_sample.zip が 流 れで 解 凍 してください htmlのhead 内 を 見 ると 下 記 のように 記 述 されています <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="subfontfile/subfontjs.js" </head> 解 凍 WOFF/EOT/SVG/OTF/TTF ヒント 情 報 なし WOFF/EOT/SVG/OTF/TTF ヒント 情 報 あり バリューライセンスでは ローカルPCにそのフォントが 搭 載 されていなくても ZIP 解 凍 した 後 ローカルPCブラウザ ントプレビューが 可 能 です なお 実 際 の 表 示 確 認 はWebサーバにてご 確 認 ください ただしローカル 環 境 ではInternet Explore(IE)ではプレビューできない 制 限 が 掛 かっています 11
Webフォントの 試 し 書 き 利 用 するWebフォントの 表 示 品 質 が 気 になりますよね FONTPLUSタグを 記 述 したHTMLをサーバにアップしなくても フォントプラ スサイトの 試 し 書 き 機 能 を 使 って 確 認 することができます! 試 し 書 き 機 能 は 全 書 体 (600 書 体 以 上 )で 試 せます ま それぞれの 書 体 の 成 立 り ちや 詳 細 説 明 なども 掲 載 されているので(すべての 書 体 ではありません) 文 字 オタクの 方 はもちろんのこと 文 字 を 勉 強 したい 方 にもおすすめです Webフォントの 表 示 品 質 は デバイス/OS 種 別 /OSバーション/ブラウザ 種 別 /ブラウザバーションにより 違 いがあります アウトラインフォ 処 理 が 異 なるためです ios(ipadやiphone)が 最 も 綺 麗 に 表 示 されます Android 端 末 系 の 綺 麗 ですし Mac OSも 比 較 的 綺 麗 です Windowsにおいては Win8/7 > WinVista > WinXP の 順 となります また 20ピクセル 麗 ですが 20 以 上 の 文 字 はどんな 環 境 でも 比 較 ポイントピクセル 以 下 の 小 さい 文 字 は 麗 綺 に 表 示 できない 場 合 もあります ただし その 環 境 においては システムフォントも 同 様 に 綺 麗 でないと 思 われます 3 検 索 結 果 で マティスえれがんとProB を 選 択 してみましょう 1[フォント 一 覧 ]を 選 択 します 2 今 回 マティスエレガント索 で してみましょう 検 無 料 トライアルで 使 用 できるフォントのみ 表 示 のチェックを 外 してください 12
4フォントの 詳 細 ( 文 字 の 由 来 利 や用 方 法 )が 掲 載 されます 表 示 用 フォント 名 :マティスえれがんと Pro B (OpenType) フォントサイズ: 10044.808 KB = 約 10Mバイト フォントメーカー: FONTWORKS 言 語 : 日 本 語 Adobe 文 字 コレクション: Adobe-Japan1-4 説 明 : エレメントの 先 端 に 付 けられたケルンが 心 地 よいリズム を 感 じさせる かな 書 体 です 1976 年 の 誕 生 以 来 エレガントで 不 思 議 な 雰 囲 気 を 表 現 する 書 体 として 長 く 愛 されています また 組 み 合 わせる 漢 字 は 明 朝 体 だけでなく キアロ スキップ とも 相 性 がよい 書 体 です 5 試 し 書 き をやってみましょう キャンペーン 情 報 力 と します 入 [ 試 し 書 きを 適 用 ]をクリックします ポイント 文 字 の 大 きさを 更 変 する 場 合 は - スライダーバーで 大 きさ 更 する変 - 数 値 入 力 と[pt][em] 選 んで [OK]ボタンを 押 す 13
Webフォント 配 信 のデータ 量 が 容 分 かります キャンペーン 情 報 という 列 を マティスえれがんとPro 文 字 B の 書 体 でWebフォント 配 信 した 場 合 約 4キロバイトです ポイント 数 指 定 em 指 定 スライダーバースクロール で 操 作 同 じデータでも 閲 覧 デバイス/OS/ブラウザ 種 別 /ブラウザバージョン 等 で 表 示 品 質 は 変 わります Win7/IE9 ipad 4rd/Safari 14
付 録 1 Webフォントの 基 本 講 座 デザイン 性 に 富 んだ 文 字 をブラウザ 表 示 させるためにはPhotoshopやIllust 画 像 データにする 必 要 がありました 日 本 語 Webフォントサービス の 登 場 により 文 画 像 化 しなくてもブラウザ 表 示 できるようになりました Webフォントを 導 入 すると デザイン 性 はそのままで SEO 対 策 制 作 効 率 UP アクセシビリティ ブランディング 更 に コピペができる! 翻 訳 や 読 上 げにも 対 応! 拡 大 しても 綺 麗! ブラウザで 表 現 できる 文 字 は 今 まで デバイス(パソコンやスマートフォン など)に 内 蔵 されたシステムフォントでしか 表 現 できませんでした ( 例 )WindowsパソコンだとMSゴシックやメイリオ Macだとヒラギノ Webフォントだと 文 字 がコピペできる! モック: http://goo.gl/ywvxmd 15
FONTPLUSではWebフォント 配 信 方 式 は 二 通 り スマートライセンス と バリューライセンス の 二 種 類 あります スマートライセンスが 高 速 化 された 後 二 度 つの がほ配 信 方 式 で 表 示 速 とんど 変 わらないたため 9 割 の 方 が 導 入 が 簡 単 なスマートライセンスを 選 択 しています コーポレートフォントを 使 用 したい CDN 経 由 で 配 信 したい フォントサブセットをWebAPIで 取 得 したい 等 への 対 応 また ゲーム 事 業 者 や EPUB 事 業 者 向 けの エンタープライズ もご 版 用 意 しています お 気 軽 にご 相 談 ください FONTPLUSサポート support@fontplus.jp 窓 口 スマートライセンス FONTPLUS サーバ 認 証 JSタグで Webフォントの 配 信 を 依 頼 Web サーバ バリューライセンス FONTPLUS サーバ 認 証 ZIPファイル(HTML+ CSS)をアップロード するとサブセットが 返 却 Web サーバ スマートライセンスは 導 入 が 比 較 的 易 容 です スマートライセンスの 表 示 速 度 が 大 幅 に 改 善 された 後 は こちらの 方 式 をご 利 用 するケースが 多 いです 閲 覧 者 のOS/ブラウザ 環 境 に 準 じたWebフォント 形 式 で 配 信 上 記 いづれかのフォーマットを 配 信 テキストや 画 像 データ 等 配 信 テキストや 画 像 データ 等 と 一 緒 にWebフォントも 配 信 上 記 いづれかのフォーマットを 配 信 20 世 紀 フォックス 様 http://eiganokotoba.jp/ バリューライセンスは HTMLとCSSをZIP 化 し FONTPLUS 理 画 面 でWebフォントを 管 事 前 に 手 動 で 取 得 し Webサーバにアップロードする 必 要 があります JavaScriptの 外 部 通 信 が 発 生 しません 鬼 怒 川 金 谷 ホテル 様 http://www.kinugawakanaya. エンタープライズ 版 (クラウド 型 /オンプレミス 型 )もご 用 意 しています 詳 細 はお 問 FONTPLUSサポート 合 せください 窓 口 support@fontplus.jp 16
Technical Info. 17
Appendix1. 便 利 ツール Webフォントのピクセルサイズ 別 表 示 テストとユニーク 文 字 数 (グリフ 数 ) 計 算 ツールを 共 有 します ピクセルサイズ 別 表 示 テスト 社 内 テストツール http://goo.gl/aplhn3 デフォルトは MSゴシック になってます font-familyを 更 することで( 例 : CometStd-B 変 ) 書 体 変 更 できます 表 示 させる 文 字 列 の 変 更 も 可 能 です なお システムフォントを 表 示 する 際 は 下 記 を 指 定 してください Windowsプラットフォーム: MS Pゴシック または メイリオ など Macプラットフォーム: ヒラギノ 角 ゴ Pro W3 または ヒラギノ 明 朝 Pro W3 など 試 したい 書 体 の font-family 名 称 は 索 下 できます 記 の 手 順 で 検 1.フォントメーカー 各 社 の 見 書 本 体 帖 をダウンロードして 書 体 を 探 すのが 便 利 です 例 : フォントワークス 書 体 見 本 帖 はこちら http://fontworks.co.jp/support/download/data/fwc 2.FONTPLUSログイン 後 [フォント 一 覧 ]で 索 すると CSSに 書 体 名 を 検 記 載 する 名 称 が 表 示 されます なお 端 末 プラットフォーム OS ブラウザ の 条 件 により Webフォントの 異 なります 表 示 品 質 が 一 般 的 にレンダリングの 性 能 (フォントのアンチエイリアス 理 )は iphone/ipad Mac 処 OSX > Android > Windows と 言 われています font-family 例 凡 書 体 名 font-family 名 書 体 名 font-family 名 書 体 名 font-family 名 マティスえれがんと MatisseElegantoPro-DB モトヤ 教 科 書 3 MotoyaKyotaiStd-W3 白 舟 印 相 体 Insotai ニューシネマA NewCinemaBStd-D LIバーチ MtySousyokuLiBcJis-W6 イワタUDゴシック IwaUDGo イワタUD 明 朝 Mかな レゲエ ReggaeStd-B モトヤバーチ MotoyaBirchStd-W3 IwaUDMinKCPro-Md C コメット CometStd-B 丸 アポロ MotoyaMaAporoStd-W4 丸 フォーク Maru Folk Bol ラグランパンチ RaglanPunchStd-UB モトヤ 正 楷 書 MotoyaSeikaiStd-W3 UD 新 丸 ゴ UD Shin M ユニーク 文 字 数 計 算 ツール 社 内 テストツール http://goo.gl/zlbygs サブセット 配 信 されるテキストのユニークグリフ 数 ( 名 寄 せ 後 文 字 数 )を 計 算 するツールです 固 有 名 称 ( 氏 名 や 地 名 など)が 少 なければ 1 万 字 の 文 章 も 数 百 文 字 になることが 多 いです ユニーク 文 字 列 をコピーして フォントプラスの 試 し 書 き 機 能 のページにて 貼 り 付 け データ 容 量 を 調 べることも 可 能 です 18
Appendix2. 公 開 API(FONTPLUSスマートライ スマートライセンスを 度 にご 高 利 用 していただくためにAPIを 無 償 公 開 しました ぜひ ご 利 用 ください フォントデータのダウンロード 了 を 判 定 完 してから 描 画 する 好 きなタイミング( 非 同 期 )でWebフォント 適 用 HTMLの 解 析 を 行 わずWeb フォント 適 用 箇 所 を 直 接 指 定 など 行 できます 実 詳 しくは 下 記 をご 覧 ください http://pr.fontplus.jp/api API 機 能 一 覧 名 称 説 明 リロード Webフォントを 適 用 した 箇 度 所 適 を 用 再 します 例 : 更 新 ボタンでWebフォントを 再 度 適 用 します Webフォントの 適 用 了 が したイベントを 完 取 得 して コンプリートイベントハンドラー javascript 等 で 理 引 を 記 き 述 続 できます き 処 セレクタ 指 定 Webフォントの 適 用 をセレクタ 単 位 で 指 定 することができます 例 :twitterのテキスト 内 のみ 非 同 期 モード 設 定 画 面 ロード 時 にスマートライセンスのスクリプト 行 を 止 めて 実 非 同 期 で のWebフォントの 適 行 用 えるようにします を 非 同 期 モード 解 除 非 同 期 モードを 解 除 してスマートライセンスのスクリプトを 再 開 します 非 同 期 ロード( 指 定 ロード) Webフォント 適 理 用 を 処 任 意 のタイミングで 実 行 できます FONTPLUS 理 中 処 チェック フォント 適 用 理 処 が 実 行 中 かを 判 定 できます フォント 指 定 使 用 するフォントを 指 定 して 理 時 処 間 の 短 縮 ができます 19
Appendix3. Webフォント 活 用 デモモック 約 750 種 類 のWebフォント 書 体 の 中 から コンテンツの 目 的 やブランデングに 応 じて 書 体 を 選 択 しましょう 筑 紫 や マティス リュウミンや 新 ゴ 等 の 有 名 利 書 用 体 になるケースも をご 多 いと 思 いますが プロモーションページ 特 設 サイトでは 書 体 バリエーションにチャレンジしましょう 下 記 はWebチラシ(ライディングページ)をイメージした 社 内 デモ 用 モ 品 画 像 の クマのぬいぐるみ 以 外 は すべてHTMLとCSSで 表 現 しています 画 像 文 字 は 使 用 していません デモ 用 モック: http://goo.gl/inxo4f テストモックにつき レイアウトは 全 てのブラウザに 対 応 しておりません ラグランパンチ RaglanPunchStd-UB; くろかね KurokaneStd-EB Webチラシの 理 管 画 面 モック 例 筑 紫 ゴシック TsukuGoPro-U ポップハピネス PopHappinessStd-EB レゲエ ReggaeStd-B このようなテンプレートがあると 特 売 商 材 を 店 長 がデジカメで 写 真 撮 影 して 理 管 画 面 で 特 売 情 報 を 修 正 すればPhotoshop 使 いの デザイーさんが 急 に 休 んでも ランディング ページがすぐに 作 成 できますね 20
Appendix4. FONTPLUSのブラウザ 対 応 表 FONTPLUSはパソコン タブレット スマホの 主 要 ブラウザに 対 応 しています IE4~5ではWebフォント 表 示 できません ( システムフォント 表 示 になります) なお 現 在 普 及 しているほとんどのブラウザに 対 応 しています IE6/7も 対 応 します スマホ/タブレット 系 のWebViewにおいてもWebフォント 表 示 させることができます FONTPLUSのブラウザ 対 応 表 ブラウザ Internet Explorer 4~5 Internet Explorer 6~7 Internet Explorer 8 FONTPLUS 対 応 状 況 EOT TTF OTF SVG WOFF Internet Explorer 9, 10, 11 Firefox 3.5 Firefox 3.6 Firefox 降 3.7 以 Safari 3.1~5 Safari 5.1 Chrome 4~5 Chrome 降 6 以 ios 3.x~4.1 ios 4.2~ ios 5.0 降 以 Android 2.2, 2.3, 降 3.x, 4.x 以 配 信 フォーマット 一 覧 2015 年 2 月 末 時 点 複 数 のフォーマットに 対 応 するブラウザの 場 合 は WOFF>OTF>TTF>SVG>EOT の 優 先 順 位 で 表 示 するよう FONTPLUS 側 で@font-faceの 設 定 しています 21
ソフトバンク テクノロジー 株 式 会 社 160-0022 東 京 都 新 宿 区 新 宿 6-27-30 新 宿 イーストサイドスクエア17 階 お 問 い 合 わせは FONTPLUSサポート support@fontplus.jp 窓 口 本 資 料 にて 記 載 されている 会 社 名 製 品 名 サービス 名 は 当 社 または 各 社 の 商 標 もしくは 登 録 商 標 です 22