Google の Webフォントはフォントファイルを 20KB～50KB程度に分割してダウンロードするなど軽量化が図られていますのでこのサイトでも使っているのですが、やはりパフォーマンスを考えますと厳しいものがあります。
でも、 NotoSans はきれいですし読みやすいですので使いたいですね。ということでサブセット化しようと思います。
01フォントファイルのサブセット化
Noto Fonts ダウンロード
上のリンクにすべてのフォントがありますが、日本語ファイルは下記リンクからダウンロードできます。クリックすると zipファイルのダウンロードを始めます。
サブセットフォントメーカー、WOFFコンバータ
ツールは武蔵システムさんからフリーソフトが提供されています。
「作成元フォントファイル」を選択し、「作成後フォントファイル」名を指定します。
「フォントに格納する文字」はサブセット化したい文字をテキストボックスにコピペします。これは次の項目をご覧ください。
「書体名を変更する」は何でしょう？ 作成されたフォントファイルのプロパティのタイトルにこの名が入ります。チェックしませんとオリジナルのタイトルが入ります。システムにインストールする場合（しないでしょうが）はまずいですね。チェックを入れて適当に入れておけばいいでしょう。
「作成終了後、WOFFコンバータを起動する」はチェックしておきます。
WOFFコンバータが自動的に立ち上がります。
「変換後ファイル」は空白にしておけば同じフォルダに同じファイル名で保存されます。
WOFF変換はすぐに終わりますが、WOFF2変換は少し時間がかかるようです。
02サブセット化する文字
漢字以外
- 基本ラテン文字
- 記号
- ひらがな
- カタカナ
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ０１２３４５６７８９!@~`#$%^&*()_-+=\|}{]['";:/?.,<> ！＠〜｀＃＄％＾＊（）＿ー＝＋｜￥｝｛’”：；・？＞。、＜「」『』あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉっゃゅょアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨャュョラリルレロワヲンガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポヵヶァィゥェォッヴ
ブログではどれだけの漢字が使われているのか？
漢字は常用漢字や第1水準から第4水準までありますが、実際自分のブログではどれくらいの漢字を使っているんでしょう。
はてなブログでは記事のバックアップをテキストファイルで取り出せますのでそのファイルから漢字を抽出してみようと思います。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <form name="form"> <input name="file" type="file" /><br/> <textarea name="output" cols="80" rows="50"></textarea> </form> <script type="text/javascript"> document.forms.form.file.addEventListener( 'change', function(e) { const file = e.target.files[0]; const reader = new FileReader(); reader.readAsText(file); reader.addEventListener( 'load', () => { const file = reader.result; let tmp = ''; [].forEach.call(file, (char) => { if(null !== char.match(/[\u4e00-\u9fff]/)) tmp = tmp + char; }); const result = tmp.split('') .filter( (value, index, array) => array.indexOf(value) === index) .sort() .join(''); form.output.textContent = result; }); }); </script> </body> </html>
上の htmlファイルを適当なところに保存し立ち上げダウンロードしたバックアップファイルを指定します。
映画のレビューを書いているこのサイトのデータでやってみました。1,000記事くらいの 58472行のファイルでしたが、Chromeでは 5秒くらいで漢字だけを抽出してきます。Firefoxですと10倍くらいの時間がかかります。1文字ずつ重複をチェックする作業が無茶苦茶重く、幾度も中止するかと尋ねてきます。
結果は 2,679文字ありました。
一丁七万丈三上下不与且丕世丘両並中串丸丹主丼乃久之乏乗乙九乞也乱乳乾亀了予争事二云互五井亘些亜亡交享京亭亮人仁仇今介仏仕他付仙代令以仮仰仲件任企伊伍伎伏伐休会伝伯伴伸伺似但佇位低住佐佑体何余作佳併使來例侍供依侠価侮侯侵侶便係促俄俊俗俘保信修俯俳俺倉個倍們倒候借倣値倦倫偉偏停健偲側偵偶偽傀傍傑傘備催傭傲債傷傾僅働像僕僚僧儀億儚償儡優儲允元兄充兆先光克免兎児兒党入全八公六共兵具典兼内円冊再冒冗写冠冤冥冨冬冴冷冽凄准凌凍凛凝凡処凧凶凸凹出函刀刃分切刈刊刑列初判別利到制刷券刹刺刻剃則削剌前剖剛剣剤剥剪副剰割創剽劇劉力功加劣助努励労効勃勇勉動勘務勝募勢勤勧勲勿匂包化北匠匡匹区医匿十千升午半卑卒卓協南単博占印危即却卵卿厄厚原厨厩厭厳去参又叉及友双反収叔取受叙叛口古句叩只叫召可台叱史右叶号司吃各合吉吊同名吏吐向君吟吠否含吸吹吾呂呆呈呉告呑呟周呪味呵呻呼命咀咆和咎咤咲咳哀品哉員哭哮哲唄唆唇唐唖唯唱唸唾商問啓啖啼喃善喉喋喘喚喜喝喧喩喪喫喰営嗅嗜嗣嗤嘆嘉嘔嘘嘩嘱嘲嘴噂噌噛器噴噺嚇嚥嚼囁囃囚四回因団囮困囲図固国圃國圏園土圧在圭地圳坂均坊坑坦垂型垢垣埋城埒域執培基堀堂堅堆堕堤堪報場堺塀塊塑塔塗塚塞塩塵塹塾境墓増墜墟墨墳壁壇壊壕士壮声売壷変夏夕外多夜夢大天太夫央失夷奄奇奈奉奏契奔套奢奥奨奪奮女奴好如妃妄妊妖妙妥妨妬妹妻姉始姐姑姓委姥姦姪姫姻姿威娘娠娯娼婆婉婚婦婿媒媚嫁嫉嫌嬉嬌嬢子字存孝季孤学孩孫孵宅宇守安完宍宏宗官宙定宛宜宝実客宣室宮宰害宴宵家容宿寂寄寅密富寒寓寛寝察寡寧審寮寵寸寺対寿封専射将尉尊尋導小少尖尚尤就尺尻尽尾尿局居屈届屋屓展属屠層履屯山岐岡岩岬岳岸峙峡峰島崇崎崖崩嵌嵐嵜嶋嶺嶼川州巡巣工左巧巨巫差己巳巴巷巻巾市布帆希帚帝師席帯帰帳常帽幅幇幌幕干平年幸幹幻幼幽幾庁広庇床序底店府度座庫庭庵庶康庸廃廊廣延廷建廻弁弄弊式弓弔引弘弟弥弦弧弱張強弾彅彌当彗形彦彩彫彰影彷役彼彿往征径待徊律後徐徒従得徘御徨復循微徳徴徹心必忌忍忖志忘忙応忠快念忸忽怒怖怙怜思怠急性怨怩怪怯恋恐恒恣恥恨恩恫息恵悄悔悟悠患悦悧悩悪悲悶悼情惑惚惜惟惣惧惨想惹惺愁愉意愕愚愛感愧愴愾慄慈態慌慎慕慚慟慢慣慧慨慮慰慶憂憎憐憑憚憤憧憩憬憲憶憺憾懇懐懲懸懺戀成我戒或戚戦戮戯戰戴戸戻房所扇扉手才打払扮扱扶批承技把抑抒投抗折抜択披抱抵抹押抽担拉拍拐拒拓拗拘招拝拠拡括拭拳拶拷拾持指挑挙挟挨挫振挽挿捉捌捏捕捜捧捨据掃授掌排掘掛掟掠採探接控推措掲掴掻揃揄揉描提揚換握揮援揶揺損搬搭携搾摂摘摩摯撃撒撤撫撮撲撼擁擅操擢擦擬攘攣攫支改攻放政故敏救敗教敢散敦敬数敲整敵敷斂文斉斎斐斗料斜斡斥斬断新方於施旅旋族旗既日旦旧旨早旬旺昆昇昌明昏易昔星映春昧昨昭是昼時晃晋晒晦晩普景晴晶智暁暇暉暑暖暗暢暮暴曇曖曜曰曲更書曹曼曾替最月有朋服朔朗望朝期朦朧木未末本札朱朴机朽杉李杏材村杓杖杜杞束条来杭杯東杵松板析枕林枚果枝枠枢枯架柄柊某染柔柩柱柳柴柵査柿栃栄栓栗校株核根格栽桁桂桃案桐桑桔桜桟桶梁梅梗梢梧梨梯械梶棄棋棒棘棚棟森棲棺椅植椎椒検椿楚業楯極楼楽概榊榎榜榮榴構槌槍様槽樋標模権横樫樹樽橋橘機檀檻櫃櫓櫛櫻欄欠次欣欧欲欺歌歓止正此武歩歪歯歳歴死殆殉殊残殖殯殴段殺殻殿毀毅母毎毒比毛氏民気水氷永汁求汗汚江池汰決汽沃沈沌沐沖沙没沢沫河沸油治沼沿況泄泉泊法泡波泣泥注泯泰泳洋洒洗洞洟津洩洪洲活派流浄浅浙浜浦浩浪浮浴海浸消涙涯液涼淀淑淡淫深淳淵混添清渇済渉渋渓渕渚減渡渦温測港渾湖湧湯湾湿満溌源準溜溝溢溯溶溺滅滋滑滝滞滲滴漁漂漆漏演漕漠漢漫漬漱潔潜潟潤潮潰澄澤澪澱激濁濃濡濤濯濱瀉瀑瀕瀧瀨瀬瀰火灯灰灸灼災炉炊炎炙炭炸点為烈烹焉焚無焦然焼煉煌煎煙照煩煮煽熊熟熱熾燃燈燥爆爛爪爵父爽爾片版牙牛牝牡牢牧物牯牲特牽犠犬犯状狂狐狗狙狩独狭狼猛猜猟猥猪猫献猶猿獄獅獏獣獪獲玄率玉王玩玲珍珠現球理琉琴瑕瑛瑞瑤瑶璃璧環瓜瓦瓶甘甚生産甥甦用田由甲申男町画界畏畑畔留畜畢略番異畳疇疎疑疫疱疲疵疾病症痍痕痙痛痢痩痴痺瘍瘤療癇癌癒癖癲発登白百的皆皇皮皿盆益盗盛盟監盤盪目盲直相盾省眉看県眞真眠眩眸眺眼着睡督睦睨瞑瞞瞥瞬瞭瞰瞳瞼矛矜矢知短矮矯石砂研砕砲破砺硫硬碌碑確磁磨礎礫示礼社祀祈祉祐祖祝神祥票祭祷禁禄禅禍禎福秀私秋科秒秘秤秦秩称移稀程税稔稚種稲稼稽稿穀穂積穎穏穣穫穴究空穿突窃窒窓窘窟窪窮窯竄立竜章童端競竹笑笠笥符第筆等筋筑筒答策筧箇箋算管箪箱箸節範篇築篠篤簡簾簿籍籠米粉粋粒粕粗粘粛粟粥粧精糊糖糞糧糸系糾紀約紅紆紋納紐純紗紘紙級紛素紡索紫累細紳紹終組絆経結絞絡絢給統絵絶絹継続綜維綯綱網綴綺綻綽綾綿緊緋総緑緒線締編緩緯練緻縁縄縊縒縛縦縫縮縺績繁繊繋繍織繰缶罠罪置罰署罵羅羊美羞群羨義羽翌習翔翠翡翻翼老考者而耐耕耗耳耶耽聖聘聞聡聰聴職聾肉肋肌肖肝股肢肥肩肪肯育肺胃胆背胎胞胡胴胸能脂脅脆脇脈脚脩脱脳腎腐腑腕腫腰腱腸腹腺腿膏膚膜膝膠膣膨膳膵臆臓臣臨自臭至致臼興舌舎舐舗舘舞舟舩航般船艇艘艦良色艶芙芝芥芦芬芯花芳芸芹芽苑苗苛若苦英茂茅茉茜茨茫茱茶草荊荒荘荷荻莉莫菅菊菌菓菖菜華萄萌萎萩萬萸落葉著葛葡董葦葬葵蒋蒔蒙蒲蒸蒼蓄蓉蓋蓬蓮蔑蔓蔭蔵蔽蕎蕩薀薄薇薔薦薪薫薬藁藝藤藩藻蘇虎虐虔虚虜虫虹蛇蛍蛛蛮蛸蜂蜃蜘蜜蝉蝕蝶蝿融螺蠢蠣血衆行衒術街衛衝衡衣表衰袋袖袢被袱裁裂装裏裔裕補裸製裾褄複褐褒襟襦襲西要覆覇見規視覗覚覧親観角解触言訃計訊討訓託記訛訝訟訣訥訪設許訳訴訶診証詐評詛詞詠試詩詫詮詰話詳誇誉誌認誓誕誘語誠誤説読誰課誹調談請諌諍諏論諜諦諭諸諾謀謂謎謐謗謙講謝謡謳識譚譜警議譲護讃讐讓谷豆豊豚象豪豹貌貝貞負財貢貧貨販貪貫責貯貰貴貶買貸費貼貿賀賂賃賄資賊賑賓賛賜賞賢賦質賭購贄贅贈贋贔赤赦走赴起超越趣足距跡跨跪路跳践踊踏踪踵蹙蹟蹴躁躇躊躍躓身躱車軋軌軍軒軟転軸軽較載輔輝輩輪輸輿轄轍轟轢辛辞辟辣辰辱農辺辻込辿迎近返迫述迷追退送逃逅逆透逐途這通逝逞速造逡逢連逮週進逸遁遂遅遇遊運遍過道達違遙遜遠遡遣遥適遭遮遷選遺遽避邂還那邦邪邱邸郁郊郎郡部郭郵郷都鄭酌配酒酔酬酵酷酸醍醐醒醜醸采釈里重野量金釘釜針釣鈍鈴鉄鉛鉢鉱銀銃銘銭鋭鋳鋼錆錠錦錬錮錯録鍋鍛鍬鍵鍼鎌鎖鎮鎹鏡鐘鐵鑑長門閉開閑間関閣閥閲闇闊闖闘阪防阻阿降限陛院陣除陥陰陳陵陶陷陸険陽隅隆隊階随隔隕隙際障隠隣隷隼雀雄雅集雇雌雑離難雨雪雫雰雲零雷電需震霊霧露靄靑青靖静靚非靡面革靭靴鞄鞍鞘鞭韓音韻響頁頂頃項順須預頑頓領頬頭頷頻頼題額顎顔顕願顛類顧顰風颯飄飛食飢飯飲飴飼飽飾餃養餌餐餓館饒首香馬馮馳馴駄駅駆駐駿騎騒験騙騰驚骨骰骸髄高髙髪髭鬱鬼魂魅魔魚鮎鮭鮮鯉鯨鰐鱗鳥鳩鳳鳴鴨鵜鶏鶴鷹鹸鹿麗麟麦麺麻麿黄黒黙鼓鼠鼻齊齋齟齢齬龍
サブセットフォントメーカーの「フォントに格納する文字」は重複していても問題ありませんので、漢字はこの抽出した文字と常用漢字を入力してサブセットフォントファイルをつくってみましょう。
常用漢字や第一水準以外の文字がどれくらい使われているかの差分も取りたいのですが、実はいま日常使っている Windows10が言うことを聞かない状態になっており、この記事もそのマシンを復元している合間に書いていますのでまた落ち着いたらです。
とりあえずは、Noto Sans CJK JP のサブセットで
WOFF 529.5KB
WOFF2 465.5KB
となりました。まあ許容範囲でしょうか。これでしばら様子をみてみましょう。