2017.09.13

CSSの@font-faceで合成フォント(サブセット)っぽいことをしてみる

Webサイトを作っているときデザイン上、特定の文字だけは違うフォントにしたい場合があります。Illustratorなどでは合成フォントという機能がありますが、同じようなことをCSSの @font-face を使って表現できます。

ベースとなるフォントを定義

今回は、さわらびゴシックをベースとして、ひらがなカタカナ部分だけさわらび明朝にする合成フォントを作ってみます。


@font-face {
  font-family: 'Sawarabi+';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.eot);
  src: url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.ttf) format('truetype');
}

Google Fontsで提供されているさわらびゴシックをベースとします。font-family は 'Sawarabi+' と名前をつけておきます。

unicode-rangeプロパティ

@font-face {...} 内で使える unicode-range というプロパティがあります。これは、src で指定されているフォントのどの文字部分を読み込むかを指定できるものです。指定する値はUnicodeで指定しなければならないので、Unicode一覧表などで検索して、対応する文字を調べておきます。


unicode-range: U+26;                /* 1つの文字だけ */
unicode-range: U+0025-00FF;         /* 範囲の文字 */
unicode-range: U+4??;               /* ?でワイルドカード */
unicode-range: U+0025-00FF, U+4??;  /* カンマ区切りで複数指定 */

フォントを一部置き換える

unicode-range とCSSのあとで書いたものは上書きされる性質を利用すれば合成フォントを表現できます。


@font-face {
  font-family: 'Sawarabi+';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.eot);
  src: url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/sawarabigothic/v1/SawarabiGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Sawarabi+';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot);
  src: url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot?#iefix) format('embedded-opentype'),
       url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.ttf) format('truetype');
  unicode-range: U+3040-309F, U+30A0-30FF;
}

同じ font-family 名で定義することで上書きできます。2番目の @font-face ではさわらび明朝を src に指定し、unicode-range でひらがな・カタカナ部分だけを読み込むようにしています。U+3040-309F がひらがな、U+30A0-30FF がカタカナ部分です。

一部ブラウザにおける懸念事項

Font unicode-range subsetting | Can I use

Can I useを見てみると、薄緑色でPartial supportと書かれたバージョンがあります。本来 unicode-range はフォントの中の指定した文字のみダウンロードして、フォントファイルの全てが読み込まれることはありません。しかし、Partial supportのバージョンでは全ての文字が読み込まれてしまい、サブセットとは言い難いです。最近のブラウザでは問題ないのですが、IE/Edgeだけが最新バージョンまでサポートしていません。そのため、合成するフォントはあらかじめサブセットしておくといいかもしれません。今回の例で言うと、さわらび明朝フォント自体をひらがなカタカナ部分だけにサブセットしておき、さらにCSS側でもサブセットするということです。

CSS本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日