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
がカタカナ部分です。
一部ブラウザにおける懸念事項
Can I useを見てみると、薄緑色でPartial supportと書かれたバージョンがあります。本来 unicode-range
はフォントの中の指定した文字のみダウンロードして、フォントファイルの全てが読み込まれることはありません。しかし、Partial supportのバージョンでは全ての文字が読み込まれてしまい、サブセットとは言い難いです。最近のブラウザでは問題ないのですが、IE/Edgeだけが最新バージョンまでサポートしていません。そのため、合成するフォントはあらかじめサブセットしておくといいかもしれません。今回の例で言うと、さわらび明朝フォント自体をひらがなカタカナ部分だけにサブセットしておき、さらにCSS側でもサブセットするということです。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs