ウェブフォントのサブセット用漢字データ 日本全国住所漢字付き

日本語ウェブフォントを実用するために

最終更新日:2017年8月16日

日本語のウェブフォントがだいぶ普及してきました。
でも、スマホやMVNOも普及して遅い回線速度は健在。
容量の大きな日本語ウェブフォントを使うときには、考えなければいけないことがたくさんあります。

個人的には、「ウェブフォントなんか使わないで[游ゴシック]にすればいいじゃないか」と思うのですが、デザイナーさんやアートディレクターさんの希望が強い場合にはそうもいきません。

そこで、いくつか考えることがあります。
大きく分けると以下。

・ウェイトの数
・対応方法

※今回「Typekit」の使用は考慮にいれていません。

ウェイトの数

いわゆる、font-weight:boldとかnormalとかで指定する文字の太さです。
太さが違うフォントは、それぞれまったく別のフォントです。
font-weight:normal は通常font-weight:400と同じです。
font-weight:bold がfont-weight:700。

最低限で済ますのであれば、標準と太いの2ウェイトだけを使用することです。

Googleが無料で公開しているウェブフォント「Noto Sans CJK JP」を例にみてみます。
https://www.google.com/get/noto/#sans-jpan
http://fonts.googleapis.com/earlyaccess/notosansjp.css

400が1.7MB
700が1.8MB

両方で3.5MBあります。
MVNO等の遅い回線で実効速度1MBだとすると、ダウンロード完了まで29.4秒かかります。

ウェブフォントをダウンロード中はどうなるのかというと、ブラウザによって異なります。

ChromeとFirefoxは、Webフォントのダウンロード開始時には該当するテキストが非表示となる。
3秒経過してもダウンロードが完了しない場合は、デバイスフォントで一旦表示される。
ダウンロード完了後、フォントを差し替え再表示。

Safariでは、フォントのダウンロードが完了するまでテキスト非表示。ダウンロード完了後にはじめてテキストが表示される。

IEは即座にデバイスフォントで表示。ダウンロード完了後、フォントを差し替え再表示。

となります。

ダウンロードが30秒となると、ウェブフォントを使っていても反映されるのはだいぶ後。
ちょっと実用は考え直したほうがいいと思います。

GoogleのCDNを使っているので、他のサイトで同じフォントが利用されていてユーザーがそのサイトを閲覧したことがあれば、フォントは端末にキャッシュされています。
キャッシュされていれば、ダウンロード時間はほぼ考えなくて大丈夫。
でもそんなことを期待するのはやめたほうがいいですね。

対応方法

どうしても日本語ウェブフォントを使うのであれば、対応方法としては主に2通り。
もちろん両方やっても大丈夫。

・サブセット化して軽くする
・Font Loading API 等で遅延ロードさせる

サブセット化して軽くする

サブセット化とは、ウェブフォントの中から必要な文字だけを抜き出すことをいいます。
「Noto Sans CJK JP」なら、6,355文字の漢字が収録されています。
でも、普段そんなに使わない。
使わない漢字までダウンロードしているので、時間が掛かってしまいます。

サイト全体をGulp等で構築されている方は、サイト内で使用している漢字を自動的に抽出して、その漢字だけが入ったフォントを作ることもできます。
やり方はここでは触れません。

CMS等で構築する場合は、このような自動化は基本的に不可能(ウェブスクレイプしたり、データベースにアクセスしたりして、組み合わせれば可能ですが)。

通常は、使うであろう文字だけを抜き出すことになります。
まずは、「常用漢字」で2,136文字
でも結構よく使う漢字も入っていないことがあります。
サブセットから漏れた漢字は、ほかのフォント(CSSで下位に設定してあるフォント)で表示されます。

店舗リスト等で各地の住所も使う場合には、住所として使用されている漢字から常用外漢字も入れた方が安心です。
ただ、あんまり入れすぎると重くなってサブセット化の意味がありません。

私が自分で調べた限りでは、住所に使用されている漢字のうち常用外漢字は765文字。
常用と合わせて3,000文字くらいなので、ファイルサイズを半分くらいに出来ます。
ただし、サブセット化して独自に作ったフォントはCDNの恩恵が受けられません。


ちなみに、サブセット化の方法については、こちらの記事がわかりやすいです。
日本語WebフォントにNoto Sans CJK JPを指定する時に気を付けたこと

Font Loading API 等で遅延ロードさせる

上に書いたように、ウェブフォントがダウンロードされまでブラウザがどのような状態になるのかは、ブラウザによりまちまちです。
これを一括して決めたい場合は、「Font Loading API」が使えます。
使い方は、Googleの公式に書いてあります。

Font Loading API を利用したフォントの表示の最適化

いつフォントのロードを開始するのか。
フォントのロードが終わったタイミングでどうするのか。
など設定できます。

例えば、「Noto Sans CJK JP」を使うのであれば、一番はじめは比較的似ている「游ゴシック」で表示して、ロードが終わった段階で「Noto Sans CJK JP」をフェードインで適用させる、などの演出が可能です。

おまけ サブセット用データ

常用漢字と、日本全国の住所で使用されている常用外漢字のリストを書いておきます。

日本全国の住所で使用されている漢字のうち常用外漢字の一覧

住所は、郵便局の下記データから漢字を抽出して、常用漢字を除外しました。
郵便番号データダウンロード(2016年11月にダウンロード)

日本全国の住所で使用されている常用外漢字 765文字
鐙榎兜笹祓泓壺蕃薮帖躰桝庚鑓鍬雀梶辻葭樋毘檀廻篭菱輿狐厨椥櫃楳藪髭燈廟沓樫釘鴫蛸佃硲秤艮巽坤莚楠馳蓼桔瘤筈峯渕菟岼宕莵琵琶槇蛭獅惣竪柚曙栢枇杷苑蜻蛉溜欽榊庵栂菖珀禄枳湊碇鱒瓜胡萱肱埜廣兎綺椿贄撰杣柘榴簾呑鷺酉靱凪汐逢伶戎杭橘鎗櫛賑菩曾饗芥鵜茸秬澤蕎翠渚茄鮎丑寅讃朋雁碓摺瓢箪瀧蔀茱萸芹稗埠祇乃鵯鶯馴撫昌屏隈葺糀櫨蔭嶺杤莇澗冨茜硯刎甑籟湛乎炬荻袴轟椒劫鼎鷆孑桾巴這鴬畦黍甸鶉筱巳糯筏桧毫鈩倭國衙檪嚢柊蟇閏掎觜鵤苔與哉隼鎧耀柤藺鵲杏祁疋琉茗礒櫟蒔苣醍醐當薑椣椹祗柞橡枌駕汀挽卜鰈椋孟其嵯峨荊薗簑莱鞆堰蓑樮狗鬮杙叶歎亥桷箭卯庖樟巌忰鋤笏碕釛箆鈑苧淞喰杼遙坏簗溪椛蟠祐籾弩槁鍜臘禾呰蒜臥楮鯰齋乢垪岨幟猴鰯潭姥篝藁縢鴉鯛糘李垢轡樅杢棯鞠獺峇嶽粭垰汲畭栩饌噌剪實厩詫戊蛙苞饒忽鯉蒼蒋颪鼡蛤裡鎚朔禎蕪侈鯆碆薊孕渭糺斧狼鞭蜷杓蜑勺鞘筥濠曰姪駛螢糒祷楚挾藏頸餉禮筵濱杁芙蓉眞犀楡袈裟蛎杠搦煤餘麹竿芒箙笥槍礫魁勒紐朶酘鮒吠亦窄蠣塘鳶硴莎迦栴鼠岱柑泗琳甫枦栫磧荏鴛碩葱礬秣掻蕗筌裳佛衲閤飫皷頴娃餠假桴岻渠矼玻蛾稜緋蘂楓稔癸珸瑤瑁已稀聚蛯鰔鴎櫓郛蹄盃珊舸莫椴砿禽芭鳧蔓甜蔦萠弗螺鼈趾宏貰鐺萢漉昴禰蕉雛淋艘蕷苺袰梹榔鐇驫舮舛嗽賽笊岫籏枋饅駮應傳埖肴繋鉈椚帷叺橇鰍麁卦蝦狄澱枡椌塒鈎埣鱈霄箒鮪圃瘻閖鍔柧蟻侭竃鰭箟薔薇廼鳰鯲儘鰄槐轌鞁凰鈷鉦戈梵剥濡鞦兀葎狸抓叉葹楯鮨梓筍暘楪脛晦擶朧梺俎釿蒄莅鴇榧坦縊燧湘勿桙蟆橲甕炮賤澳陦熨耻楊戌笈胄頤旱啼埓圷猯狢掉鵠跿烟樛錫晃祠櫻狹笂冑鋏衾垳黛粂犢鏑萬稱泪磑笄剃砧濤舳菫纒壗艀捲蜘鏥鱸竺鱗蝶椡鰕萄槙劔ヴ扣蚫叡畉鮖楜鶚躬晒亟峅娚閨飴繩窕禿剱緤伽爼椙鬚蝉垈棡榑舂鉋鑪篶伍皐頬猷湫甥薙蜆鵺訶墹蝮橦鋺筬靖莨敲蟷螂惟駈圦縞鶇崗效凧泙麩莪梛鰹鯏籔漕釆粥枅鮠慥邇焔綣嶬琢菴榿靭閻皀莢蘆庇曼沮麸樵也猩笋滕駝轆轤錺罧淳樒撞竈諫惠潴條鰺檜旛耆檮

常用漢字の一覧

常用漢字 全2136文字
亜哀挨愛曖悪握圧扱宛嵐安案暗以衣位囲医依委威為畏胃尉異移萎偉椅彙意違維慰遺緯域育一壱逸茨芋引印因咽姻員院淫陰飲隠韻右宇羽雨唄鬱畝浦運雲永泳英映栄営詠影鋭衛易疫益液駅悦越謁閲円延沿炎宴怨媛援園煙猿遠鉛塩演縁艶汚王凹央応往押旺欧殴桜翁奥横岡屋億憶臆虞乙俺卸音恩温穏下化火加可仮何花佳価果河苛科架夏家荷華菓貨渦過嫁暇禍靴寡歌箇稼課蚊牙瓦我画芽賀雅餓介回灰会快戒改怪拐悔海界皆械絵開階塊楷解潰壊懐諧貝外劾害崖涯街慨蓋該概骸垣柿各角拡革格核殻郭覚較隔閣確獲嚇穫学岳楽額顎掛潟括活喝渇割葛滑褐轄且株釜鎌刈干刊甘汗缶完肝官冠巻看陥乾勘患貫寒喚堪換敢棺款間閑勧寛幹感漢慣管関歓監緩憾還館環簡観韓艦鑑丸含岸岩玩眼頑顔願企伎危机気岐希忌汽奇祈季紀軌既記起飢鬼帰基寄規亀喜幾揮期棋貴棄毀旗器畿輝機騎技宜偽欺義疑儀戯擬犠議菊吉喫詰却客脚逆虐九久及弓丘旧休吸朽臼求究泣急級糾宮救球給嗅窮牛去巨居拒拠挙虚許距魚御漁凶共叫狂京享供協況峡挟狭恐恭胸脅強教郷境橋矯鏡競響驚仰暁業凝曲局極玉巾斤均近金菌勤琴筋僅禁緊錦謹襟吟銀区句苦駆具惧愚空偶遇隅串屈掘窟熊繰君訓勲薫軍郡群兄刑形系径茎係型契計恵啓掲渓経蛍敬景軽傾携継詣慶憬稽憩警鶏芸迎鯨隙劇撃激桁欠穴血決結傑潔月犬件見券肩建研県倹兼剣拳軒健険圏堅検嫌献絹遣権憲賢謙鍵繭顕験懸元幻玄言弦限原現舷減源厳己戸古呼固孤弧股虎故枯個庫湖雇誇鼓錮顧五互午呉後娯悟碁語誤護口工公勾孔功巧広甲交光向后好江考行坑孝抗攻更効幸拘肯侯厚恒洪皇紅荒郊香候校耕航貢降高康控梗黄喉慌港硬絞項溝鉱構綱酵稿興衡鋼講購乞号合拷剛傲豪克告谷刻国黒穀酷獄骨駒込頃今困昆恨根婚混痕紺魂墾懇左佐沙査砂唆差詐鎖座挫才再災妻采砕宰栽彩採済祭斎細菜最裁債催塞歳載際埼在材剤財罪崎作削昨柵索策酢搾錯咲冊札刷刹拶殺察撮擦雑皿三山参桟蚕惨産傘散算酸賛残斬暫士子支止氏仕史司四市矢旨死糸至伺志私使刺始姉枝祉肢姿思指施師恣紙脂視紫詞歯嗣試詩資飼誌雌摯賜諮示字寺次耳自似児事侍治持時滋慈辞磁餌璽鹿式識軸七

サブセット用英数記号

英数記号 525文字
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉっゃゅょアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨャュョラリルレロワヲンガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポヵヶァィゥェォッヴ!@~`#$%^&*()_-+=\|}{]['";:/?.,<>  !@〜`#$%^*()_ー=+|¥}{'":;・?>。、<「」『』¡¢£¤¥¦§¨©ª«¬¯°±²³´µ¶·¸¹º»¼½¾¿,.゛゜ ̄ヽヾゝゞ〃仝〆―‐/\∥...‥'"〔〕[]〈〉《》【】-×÷≠≦≧∞∴♂♀′″℃¢£&☆★○●◎◇◆■△▲▽▼※〒→←↑↓〓∈∋⊆⊇⊂⊃∪∩∧∨¬⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡◯ゎゐゑヮヰヱ─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂

コメント(0)

  • ※コメント確認画面はありません。
  • ※コメント投稿後は再読み込みをしてください。
CLOSE ×