ブログ

2018.12.25

Webサイト上にフォントをアウトライン化して表示してみよう

こんにちは！エンジニアのsuganoです。

コーダーはデザインカンプをもとにコーディング作業をします。
カンプ上では上手く表現できるものを、WEBサイト上では上手く表示出来ないことがしばしばあります。
そこで私がコーディングしていく中で、こういう現象あったなというのを一つご紹介したいと思います。

コーディング中にfont-familyで特定のフォントを使用して
自分のPCでは問題なく表示されているのに、別のPCで確認すると
意図しないフォントに置き換わってしまったりするなど、ありませんか？
なぜこういう現象が起きてしまったのかということと、それの対処方法についてまとめたいと思います。

アウトライン化とは何か

通常、WEBサイトで表示されるテキストは
ユーザーのPCやSPにインストールされたものを使って表示させます。
つまり、環境にないフォントはデフォルトフォントに置き換えられてしまうそうです。

では、どうしたらどんな環境で見てもデザイン崩れを防ぐことができるのか
もしWebフォントなどで表示出来ない場合は、テキストのアウトライン化を行うことが一番良いです。

■アウトライン化・・・文字情報を図形化することで、どんな環境でもデザイン通りの文字を表示出来ます。
以下のイメージより、アウトライン化してSVGしたものをHTMLに埋め込むとWEBサイト上に表示することが出来ます。
【イメージ】
テキストのまま：環境の違いでフォントが変わってしまう

アウトライン化：図形なので、文字化けや置換の心配がない

アウトライン化はIllustratorで行います。
詳しくは次の項目へ。

アウトライン化からSVGの書き出しまでの手順

ここで紹介するのは、Photoshopのデザインカンプにあるテキスト（ここはテキストだけ）から
Illustratorでアウトライン化にしてSVGを書き出す方法を説明します。
フォント：Tekton Pro
※注意点※
指定フォントがインストールされている状態で、作業開始して下さい。
インストールされていない環境では、フォントが変わります。

Photoshopで文字の領域のサイズを測ります
①該当レイヤーを選択＞ ②[レイヤー]メニュー＞ ③レイヤーに基づく新規スライス

④スライスで右クリック＞ ⑤スライスオプションを編集

⑥スライスオプションでサイズ確認
ここでは【W:276px , H:45px】で進めます。

Illustratorでそのサイズ【W:276px , H:45px】で新規アートボードを作成します

①Photoshopでテキストレイヤーを右クリック＞②SVGをコピー
※テキストレイヤーのままIllustratorに貼り付けると、環境によって見た目が変わる場合があるので
SVGをコピーすると、テキスト情報のまま貼り付けることになるので、Photoshop上の見た目と同じように貼り付けることが出来ます。

ちなみにアウトライン化せず、PhotoshopだけでSVGを書き出すと以下のようになります。

Photoshopのテキストレイヤーを右クリック→SVGをコピー→テキストエディタに貼り付けると、、、

<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="259px" height="42px">
<text kerning="auto" font-family="Kozuka Gothic Pr6N" fill="rgb(0, 0, 0)" font-size="62px" x="0px" y="41px">
<tspan font-size="62px" font-family="Tekton Pro" font-weight="bold">EVOWORX</tspan>
</text>
</svg>

Photoshopのテキストレイヤーを右クリック→SVGを選択して書き出すと、、、

<svg xmlns="http://www.w3.org/2000/svg" width="259" height="42" viewBox="0 0 259 42">
<defs>
    <style>
      .cls-1 {
        font-size: 62px;
        text-anchor: middle;
        font-family: "Tekton Pro";
        font-weight: 700;
      }
    </style>
  </defs>
  <text id="EVOWORX" class="cls-1" x="129.124" y="41.122"><tspan x="129.124">EVOWORX</tspan></text>
</svg>

上記２点より、これではcssでfont-familyを指定するのと変わらないので、Illustratorでアウトライン化をします。

※補足※
テキストレイヤーを右クリック→作業用パスを作成
の順に作業すると、Photoshop内でもアウトライン化することは可能ですが
Illustratorは書き出し設定など細かな調整ができるので、この場合はIllustratorにしてます。

Illustratorに貼り付け
※この時点ではまだアウトライン化されていないので、バウンディングボックス
（line-heightの分もあわせて）がアードボードから出ても問題なし
※カーニング（V/Aの値）がずれてることがあったらPhotoshopを見ながら調整

①[書式]メニュー＞ ②アウトラインを作成（⌘+shift+O）
これでアウトライン化が出来ました

次にSVG書き出しを行います。
①[アセットの書き出し]パネルにドラッグ
②アセット1部分をダブルクリックして、書き出したいファイル名に変更
ここでは例として「image」という名前にしました
③右上のパネルメニューをクリック
④形式の設定を選択
⑤左側の画像形式でSVGを選択
⑥設定の内容はキャプチャより
⑦設定を保存　をクリック
⑧右下にある書き出し　をクリック
⑨書き出すファイルの保存場所を選択

これでSVGファイルが書き出されました。

■プレゼンテーション属性
各要素ごとにSVGの記法で記述されます。
※シンプルなアイコンやロゴなど、オブジェクト数が少ない場合は
「プレゼンテーション属性」が軽量になることが多いです。

■小数点以下の桁数
初期設定は2です。桁数を減らすほどファイルサイズが小さくなるメリットがありますが
パスの精度が低くなり、不自然な形に見えてしまうことがあります。
精密なイラストや図形の場合は3をオススメします。

■レスポンシブ
チェックすると、SVG内のwidthとheight属性がなくなります。
その場合、SVGを背景画像に指定すると予期しない表示になったり
Internet Explorerで表示比率がおかしくなる場合がありますので
通常はチェックしない方がよいでしょう。

参照：世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

最後に

以上がSVGの書き出しまでの手順となります。
少し面倒な作業ですが、SVGをHTMLに埋め込むと
WEBサイト上にフォントが上手く表示できたり、CSSで色など制御することも出来ます。
かなり長くなってしまいましたが、、、私はこんな感じでこの前初めて作業しました。
次回はsvgでアニメーションを実装するのをチャレンジしてみたいと思います。
ではそろそろこの辺で〜！皆さんも良いお年をお迎えください★