Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@megurock

日本語 Web フォントの読込み速度を改善する - その1

More than 1 year has passed since last update.

Google Fonts が日本語 Web フォントを提供している仕組みに倣い、フォントデータを 120 ファイルに分割して読込みの最適化を行う 試みです。

今回は実装の説明の前に、予備知識として Google Fonts がどのように日本語フォントを提供しているかを確認してみたいと思います。

Google Fonts では日本語をどのように分割しているのか?

Google Fonts 提供の Noto Sans JP が、どのようにサブセット化されているかを確認できるページを Vue で作ってみましたので、Chrome でアクセスしてみてください。(Chrome でなくても良いですが、IE はダメです!:poop:
https://jp-webfont-subset-example.herokuapp.com/noto-sans#/

img_01.PNG

  • ページ左上のコンボボックスで Font Set 0 から Font Set 119 までを変更できます。

  • Google Fonts が提供する日本語フォントは、このフォントセットの単位でサブセット化され、それぞれ固有のフォントファイルとして CDN から提供されています。

  • 開発者ツールを開き、[Network][Font] を表示すると、フォントセットを切替えたり、テキストエリアで適当な文字を入力すると、適宜必要なフォントセットが動的に読み込まれる様子を確認することができます。

  • この動的読込みの仕組みに JavaScript は必要なく、CSS の機能だけで実現されています!:laughing:

Google Fonts の仕組み

Google Fonts 提供の Noto Sans JP を利用する際に読み込む CSS には、以下のような記述が全部で 120 個定義されています。

/* [0] */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans Japanese Regular'), 
       local('NotoSansJapanese-Regular'), 
       url(https://fonts.gstatic.com/s/notosansjp/v20/-F62fjtqLzI2JPCgQBnw7HFow2ou2HcP5pp0erwTqsSCpNtb5_OnUY4AN8I8f2ogPhktlh5UtNFs.0.woff2) 
       format('woff2');
  unicode-range: U+25e56, U+25e62, U+25e65, U+25ec2, U+25ed8, U+25ee8, U+25f23, U+25f5c, U+25fd4, U+25fe0, U+25ffb, U+2600c, U+26017, U+26060, U+260ed, U+26222, U+2626a, U+26270, U+26286, U+2634c, U+26402, U+2667e, U+266b0, U+2671d, U+268dd, U+268ea, U+26951, U+2696f, U+26999, U+269dd, U+26a1e, U+26a58, U+26a8c, U+26ab7, U+26aff, U+26c29, U+26c73, U+26c9e, U+26cdd, U+26e40, U+26e65, U+26f94, U+26ff6-26ff8, U+270f4, U+2710d, U+27139, U+273da-273db, U+273fe, U+27410, U+27449, U+27614-27615, U+27631, U+27684, U+27693, U+2770e, U+27723, U+27752, U+278b2, U+27985, U+279b4, U+27a84, U+27bb3, U+27bbe, U+27bc7, U+27c3c, U+27cb8, U+27d73, U+27da0, U+27e10, U+27fb7, U+2808a, U+280bb, U+28277, U+28282, U+282f3, U+283cd, U+2840c, U+28455, U+2856b, U+285c8-285c9, U+286d7, U+286fa, U+28946, U+28949, U+2896b, U+28987-28988, U+289ba-289bb, U+28a1e, U+28a29, U+28a43, U+28a71, U+28a99, U+28acd, U+28add, U+28ae4, U+28bc1, U+28bef, U+28cdd, U+28d10, U+28d71, U+28dfb, U+28e0f, U+28e17, U+28e1f, U+28e36, U+28e89, U+28eeb, U+28ef6, U+28f32, U+28ff8, U+292a0, U+292b1, U+29490, U+295cf, U+2967f, U+296f0, U+29719, U+29750, U+29810, U+298c6, U+29a72, U+29d4b, U+29ddb, U+29e15, U+29e3d, U+29e49, U+29e8a, U+29ec4, U+29edb, U+29ee9, U+29fce, U+29fd7, U+2a01a, U+2a02f, U+2a082, U+2a0f9, U+2a190, U+2a2b2, U+2a38c, U+2a437, U+2a5f1, U+2a602, U+2a61a, U+2a6b2, U+2a9e6, U+2b746, U+2b751, U+2b753, U+2b75a, U+2b75c, U+2b765, U+2b776-2b777, U+2b77c, U+2b782, U+2b789, U+2b78b, U+2b78e, U+2b794, U+2b7ac, U+2b7af, U+2b7bd, U+2b7c9, U+2b7cf, U+2b7d2, U+2b7d8, U+2b7f0, U+2b80d, U+2b817, U+2b81a, U+2f804, U+2f80f, U+2f815, U+2f818, U+2f81a, U+2f822, U+2f828, U+2f82c, U+2f833, U+2f83f, U+2f846, U+2f852, U+2f862, U+2f86d, U+2f873, U+2f877, U+2f884, U+2f899-2f89a, U+2f8a6, U+2f8ac, U+2f8b2, U+2f8b6, U+2f8d3, U+2f8db-2f8dc, U+2f8e1, U+2f8e5, U+2f8ea, U+2f8ed, U+2f8fc, U+2f903, U+2f90b, U+2f90f, U+2f91a, U+2f920-2f921, U+2f945, U+2f947, U+2f96c, U+2f995, U+2f9d0, U+2f9de-2f9df, U+2f9f4;
}

/** 以下[119] まで [0] と同様のフォーマットが続きます **/
項目名 説明
src 参照するフォントデータ。ユーザのローカルにない場合は、url で指定されているフォントデータを利用します。
unicode-range 「U+」から始まる英数字(文字コード)。例えば最初の U+25e56 は、「𥹖」を表します。

srcurl には unicode-range で指定されているすべての文字だけを埋め込んだ(サブセット化)フォントファイルへの参照が設定されています。

そして、ブラウザはページ内で使われているテキストの中に unicode-range で指定された文字があれば、紐づけされたフォントファイルを自動的に読み込んでくれるという仕組みになっています。意外とシンプルですね!:sunglasses:

気づいたこと

  • Noto Sans JP 以外の Google 日本語ウェブフォントの unicode-range 指定も同じだった。

  • 基本的には、文字タイプ(平仮名/片仮名/漢字/英数字/記号)、漢字の部首をベースにグループ分けされているように見受けられる。使用頻度や画数なども関係あるのかもしれない。

  • 何ヶ所か意味不明な範囲指定がある。例えば Font Set 118にはすべての英数字がサブセット化されているように見えるが、実は「N」だけは Font Set 117 の方に含まれている。

  • それぞれのフォントファイルに含まれる文字数と、ファイルサイズは結構マチマチ。ファイルサイズは最大が Font Set 6 の73.0KB、最小が Font Set 115 の 13.5KB だった。

  • 表示上は同じ漢字が異なるフォントセットに含まれていたりする。例えば「林」は、Font Set 0Font Set 102 の両方に含まれているが、unicode-range による指定は、それぞれ U+2f9f4U+6797 で別のコードとなっている。

  • 上記に関連して、String.fromCharCode(parseInt('0x2f9f4')) で「林」という漢字をレンダリングした場合でも、Font Set 102 (U+6797) の方が読みこまれる。同様のケースが他にもいくつか有り。

  • 文字コード指定されたすべての文字がフォントとして用意されているわけではない。ところどころ文字化け?したり、_sans で表示される文字が有る。

  • <input> 要素の placeholder 属性に指定されたテキストについても、ちゃんと認識してくれる。(当たり前?)

Google のサブセット化を模倣する方法..(その 2 へ続く)

Google Fonts が日本語フォントを分割している法則は完全には分からないものの、同じ unicode-range に従って開発者が任意の日本語フォントをサブセット化さえできれば、同様の最適化の恩恵を受けられるはずですね?

次回は実際に Google Fonts と同じ要領で、日本語フォントを 120 個に分割してサブセット化する方法について書こうと思います!

日本語 Web フォントの読込み速度を改善する - その2

参考

6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
megurock
フロントエンドエンジニア。一昔前はFLASHer。もっと昔はWebデザイナ。犬が好き。
fork
株式会社フォークは、Webサイトの企画・制作・開発・サーバホスティング・コンタクトセンターを一社に集約したワンストップソリューションを展開する制作会社です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?