weep Blog

どうもみなさん。ホエホエパー。

weep.jp

***最近の近況***

woff2 を base64 にして CSS にぶち込むだけの最悪フォントレシピ。

フリーフォントマニアの weep です。

f:id:weep:20180705214434p:plain

 

なにやらここが流行ってるらしい。。。

 

いいっすねぇ。

フリーフォント

 

 

 

このブログで使ってるフリーフォント

 

おいらのこのブログでもフリーフォント使ってます。

1つは「k8x12」ってのです。

k8x12

一部文字だけですが。。

 

f:id:weep:20180614191806g:plain

どうもみなさん。

ホエホエパー。

ラジオが だいすきな

ウィープ で~す。

ラジコの

タイムフリーで

エリアフリーな

カンジです。

 

こんなフォントです。

特徴としては、濁点と半濁点がファミコンっぽく見やすい点ですね。

よそのフォントだと、単独の濁点や半濁点をつけてなんとかしろ的な陰険なドット文字フォントが多い中、こちらはちゃんとしてます。

 

ライセンス文には

これらのフォントはフリー(自由な)ソフトウエアです。

あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

という太っ腹なことが書かれています。。。

f:id:weep:20180705185228p:plain

サブタイトルにも使ってます。

あと、weep.pw でも流用してます。。。

ありがたや。。。ありがたや。。。

 

 

Migu 1P

当ブログの記事タイトルと本文に流用しています。

大好きなフォントです。

 

 

Migu の特徴は、「半濁点と濁点の判読性」。

「ぱぴぷぺぽ」「パピプペポ」の半濁点の大きさが際立っています。

「ぱばぴびぷぶぺべぽぼ」「パバピビプブペベポボ」と。。。

 

ほかにも、「Nasu」というコンセプトが似てるものもあるんですが。。。

 

 

うーん。

やっぱ、おいらは「Migu」です。

 

半濁点音の名前を名乗ってるおいらがこだわるところです。

ウィーブとは言わせない!!!

 

ライセンスは、「IPAフォントライセンスv1.0」です。

たぶん、Webフォントに使っても怒られないでしょう?

 

 

導入方法

    1. サブセットフォントメーカー」で、必要な文字だけを収録した ttf を作る。

      おいらのレシピはこの「512種類」の文字です。

      、。,.:;?!゛゜´` ̄_〃々〆-―‐/\~|…‥‘’“”〝〟()〔〕[]{}〈〉《》「」『』【】+-±×÷=≠≒<>≦≧∞♂♀°′″℃¥$%#&*@♥♡♧♣♤♠♢♦☆★◯〇○●◎◇◆□■△▲▽▼※〒→←↑↓〓⊂⊃∪∩∧∨Σ⌒∇≡≪≫♯♭♪0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんーァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ0@`!"#$"'OAQa1q"2BRbr#3CScs$4DTdt%5Uu&6FVfv7Gg(8HXhx)9IYiy*:JZjgz+;K[k{,<L\l|-=M]m}>N^n~/?oアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨワヲン  ゙゚、。ーァィゥェォャュョw_「WEep」.P©®

       

    2. それを「WOFFコンバータ」で、woff2 に出力。

    3. 出力した woff2 を「File to Base64 Encoder」とかの base64 変換できるサイトに投げる。

    4. CSSbase64 にした woff2 を仕込む。

      はてなブログ(Pro)で仕込む時は、「デザインCSS」だと、謎の容量制限で、容量の限界範囲で強制的に文字列のカッティングがされると言う「事前説明も何もない初見殺しのビチクソ仕様」なので、「ヘッダ」か「フッタ」に入れるようにすると良いです。

      f:id:weep:20180705222934p:plain

      運営のクソタレどもを許すな!

      @font-face {
      font-family: 'フォントの名前';
      src: url(data:font/woff2;base64,ここに base64 に変換した文字列を入れる);
      }

      f:id:weep:20180705165623p:plain

      こうなります。。。
    5. 怒られたら困るので、ライセンス情報を註釈に書きます。

      あ、書き忘れてたので、この機会においらは今書きました。

    6. 仕込んだフォントをインストールしてない環境(スマホとか)で動作確認する問題なければ OK!

      ここ意外と重要です!

 

この方法での導入理由

この方が表示が早い気がする(錯覚)。

 

漢字までも「Webフォント」を使っていく必要はおいら的にはないんじゃないかなぁと思ってる昨今なのですよ。。。

漫画の吹き出しのフォント(「写植フォント」と言うらしい)をよく見ると、ひらがなとカタカナは明朝だけど、漢字はゴシックになってるみたく、言わないと気づかないでしょう?

 

また、おいらは「woff2 オンリー」にしているのですが、これは「古いブラウザは知らない。蹴落とします。」と言う意思表示になります。

未だに「古いブラウザ」を使ってる人らのために対処するほうがおかしいし、むしろ絶望にさせるようなことをどんどんすべきではないのかなぁと思い、これからもやっていきまっしょい。。。

 

とは言え、おいらの職業は IT系 ではなく、趣味で覚えてきた感じなので「業界的な一般常識が欠如してるかもだぜ?」ってところは、ご容赦下さい。

 

こんなんで、どうっすかね?

では、またね。。。。。。

© 2018 weep Blog

( 記事内容の転載・掲載はご連絡下さい )