読者です 読者をやめる 読者になる 読者になる

おいらの動作確認。

id:weep による、動作確認用ブログ。

※当サイト内の文章・画像を「NAVERまとめ」等に転載することを禁止します。

【レシピ】woff の base64 漬けを css に挟んだ Webフォント

出されたものは文句言わずに残さず食べる weep です!!

汁まで残さず飲みほします!

 

f:id:weep:20170318223114p:plain

 

しかし、食べた後に「お皿洗ってね」って言われたら温厚だった人格が急変し、文句を 1,000~10,000 ほど言いながら皿をゆっくり時間かけて洗う結婚できない男子です!

うるせえよタコ!!!1

 

気づいたら、正月は毎年おいらが皿洗ってるじゃんよ!

これが本家の長男である宿命なのかい?

そんなとこの嫁に誰もなりたいとは思わんじゃんよう。

わあわあ、

 

ふん。

おいらのプライベートなクソ話は至極どうでもいいんだよ。

こんな話、恥ずかしいだけなんだよ。

 

以下、本題。

 

 

 

 

そんなわけで、先日の記事参照。

weep.blog

その対策に乗り出したが、今やアクセスなど減少気味なので、今更やってもしょうがないことは確実。

だが、はてなブログと言うのは「はてブ数」が増えれば運命が変わるシステムと言うかメカニズムにある。

 

 

作り方

間に合わせレシピ

用意するもの

() 内のことはやったことを前提にして以下の工程へ。

今回の目的

まず、やることは文字の選定である。

上記の「おいらが厳選した512文字」はあくまで参考なので、自分の都合に合わせて厳選して収録すれば良いのだ。 

ただ注意すべき点は、英数字の羅列である base64エンコードするわけですが、これはデータ量が多ければ多いほど文字列が増やすだけので、本当に必要な文字だけを厳選するのです。

base64 とは、バイナリデータを英数字と「+」「/」の64種類と、名前の由来から除外される存在の「=」を使用するエンコード方式で、これでバイナリデータをエンコードすれば、CSS内に記述するだけでもバイナリデータが扱え、当記事ではフォントの例だが、画像もエンコードすれば使用できるわけ。

データ量がオリジナルの 4/3 (およそ130~140%)で、下手すると1.5倍になるのが面白い欠点ではある。

// おいらは、base64url ってやつのが個人的にすごく好き。

しかしこれは、圧縮を目的とするわけじゃなく、CSS にバイナリデータを仕込むことを目的にしているわけ。

 

そのため、せいぜい無茶をすれば、収録できるフォントの文字種は、 512種類 だとかなり多めであり、これ以上の文字種を増やすと、文字列が大幅に増加し限界に達し、CSSとして成り立たなくなる恐れも出てくるからである。

 

(実際においらは、やらかしました。)

 

必要な分だけ漢字収録はしてはいいが、漢字を入れていくと、あれもこれもとキリがなくなるので、英数字程度が理想であるということになる。で、ひらがなカタカナ記号込みにしていけば 512種類になってしまうと。。。

 

したがって、ブログタイトルやサイドにあるメニュー項目の文字だけに限定して使う。

これが、1番望ましい利用法と言えるのです(ココ重要)。

 

 

工程表

1. 収録する文字を厳選する

サブセットフォントメーカー起動。

f:id:weep:20170318164438p:plain

あとは、書いてある通りにやるだけ。

これ以上の利用法はググれば既にあるので割愛。

「作成後、WOFFコンバータを起動する(W)」は超便利だ。

 

2. それを woff に変換

とりあえず、 今回は厳選した文字種だけで woff が欲しいので

f:id:weep:20170318164838p:plain

これで、woff に変換します。

 

 

3. woff を base64エンコード

File to Base64 Encoder」で先ほど作成した woff を選択します。

いやはや、これらのサービスがフリーなのが、ありがたやありがたや。フリーフォントもありがたや。

 

f:id:weep:20170318180220p:plain

「ファイル選択」ってところだけが日本語だから「英語わかんなあ~~~い」ってカマトトぶるクソババアも大丈夫よん。

 

ファイル選択したらすぐにフォームにエンコードされた base64 が出てきます!!

f:id:weep:20170318185850p:plain

 

 

4. CSS タグの確認

さて、base64 を全てコピペして CSS に入れるか。

CSS に入れるときはこうやります。

@font-face {
           font-family: 'フォントの名前';
           src: url(data:font/woff;base64,ここに改行せずに入れる);

}

 

 

5.注意点

以下、はてなブログPro 必須

(これも注意事項だが、Pro 前提で説明する)

 

ここから本気の注意事項

どうやら、われら「はてなブログ」の「デザインCSSでは使用できる容量だか文字数が決まってるらしい。ケチ~。

先ほどの文字数を食う base64「デザインCSS上で仕込むことで、CSS が途中でぶった切られると言うアクシデントも発生します!!! これは事前に知るべき注意事項です!!!!

(実際においらは、やらかしましたけどね。)

 

 

 

ならば、どうすべきか?

 

 

 

「ヘッダ」に仕込むんですよ!!

f:id:weep:20170318205945p:plain

入れてみたらこうなりますが。

 

展開すると。

f:id:weep:20170318210107p:plain

どっちゃり。

 

 

ヘッダのとこに入れる時はこうします。

<style>

@font-face {
           font-family: 'フォントの名前';
           src: url(data:font/woff;base64,ここに改行せずに入れる);

}

</style>

この手はスマホモードでも可能です。

 

動作確認が終わったら。。。

 

6.公開

f:id:weep:20170318210247p:plain を押して完了です。

いやぁ、わけの分からない説明でしたね。

 

 

 

終わり

以上がレシピです。

説明がドヘタクソで、すいませんの世界です。 

本当に試した方は、マジでお疲れ様でした。