自作 WOFF を作ってみた-#1。

投稿アップデート情報  追記(7/17)

Widgets Title on English blog テーマを “Sugar and Spice” に決めた理由の一つに,ウィジェットのタイトルデザインがあった。もともとは,ブログタイトルにもこのデザインが使われるようになっている。これに使われているフォントは Niconne という名前の Google Fonts で,使い方はこの辺にある。

Widgets Title on Japanese blog 間抜けな話だが, Niconne にはアルファベットと数字しか入っていないので,日本語ブログのほうの表示は,右図のようなことになってしまった。無味乾燥だし, wp だけが Nicconne なので,余計変に思える。日本語表示のほうは当然ビジターの環境に左右されるわけだ。これは,ヤダ,と思った。

 なんか使えるもんがないかと探してみたんだが,日本語というのが足を引っ張る。文字数の多さとファイルの馬鹿でかさ。はじめのころのパソコンと同じ理由だ。 NEC のパソコンなんて,漢字ROM が入ってましたからね。
 作るのが大変なため,無料で利用できるものが非常に限られる。丸ごと, WOFF にして乗っけると,ファイルのでかさのため,ブログの表示速度にも影響する。そのうち,パソコンの漢字ROM 同様,技術が解決してくれるだろうが,今は,間に合わない。

 で,自分で作ることにしちゃったのヨ。いるのは,(最近の投稿広告コメントタグアーカイブテゴリ日本公式キャラクwp)の31文字だけだから,サブセット化ということをやれば,自鯖でも行けそうだから d(^o^) 。

 はじめまっせ。

**地道に**

  1. 31 文字を手書きした。字に自信はないので,もとから変な形にした。ハハハ。右のタイトルの字をご覧あれ。
    テーマを替えちゃったので、サイドバーに自作の文字がなくなったのを忘れてた。こんなのだったんだよ。 ☞
  2. 書いた文字をスキャンして, png ファイルにする。 jpg でしか保存できないなら,コンバータがいる。後で, Inkscape をインストールするから,これをコンバータにしてもいい。ちょっと,使いにくいが。
  3. 1文字ずつ, 1000 pixels x 1000 pixels の png ファイルにする。 “p” と “w” は 500 pixels x 1000 pixels。
  4. できた png のは,ビットマップファイルなので,ベクターイメージファイルに変える必要がある。 inkscape-0.48.4-1-win32.7z をダウンロードする。うちのは Windows8 x86 用です。
  5. inkscape-0.48.4-1-win32.7z を適当な場所に展開する。
  6. inkscape.exe を実行。
    1. png を1枚開く。画像上でクリックして,フォーカスを当てる。
    2. ビットマップをトレースする。メニューバーから (パス → ビットマップをトレース)をやると,トレースビットマップの窓が現れる。 [OK] をクリック。窓を×で閉じる。
    3. パスを簡略化する。 (パス → 簡略化する),これだけ。 Inkscape SVG として,ファイルを保存。
    4. Rotate rule.1-3 を png ファイル分繰り返す。
      [注] 手作業でベクターイメージを作る場合には,次のことに気を付けること。右図で矢印方向に進むとき,右側が文字エリア,左側が空白エリアである。これが狂うと,ちゃんと字にならない。
  7. setup-x86.exe (32-bit installation) をダウンロード。 FontForge for Windows が使えるようになっているので,そちらを使ったほうが早い。追記参照。
  8. cygwin をインストールする。 FontForgeSetup_2012-07-31_Windows.exe があるんだが,残念ながらうまく動かなかったので, cygwin 版を使うことにした。
  9. setup-x86.exe を実行。
    • “Choose A Download Source” では “Install from Internet”。
    • “Install For” では “All Users”。空白を含む場所は避ける。たとえば, “Program Files” などはやめたほうがいいらしい。
    • “Internet Connection” では “Direct Connection”。
    • “Choose A Download Site” では,どっか好きなとこ選んで。
    • “Select Packages” では, X11 を “Defalt” から “INstall” に変更。
    • で,インストール。
  10. fontforge_cygwin-20090914.tar.bz2 をダウンロードする。
  11. fontforge_cygwin-20090914.tar.bz2 を cygwin\home\<username> に移動する。
  12. FontForge のインストール。
    cygwin を実行 (cygwin のショートカットをクリックする)。

    1. $ bunzip2 fontforge_cygwin-*.tar.bz2
    2. $ tar xf fontforge_cygwin-*.tar
    3. $ cd fontforge
    4. $ ./doinstall
    5. $ cat >> ~/.bashrc
      PATH=${PATH}:/usr/local/bin ; export PATH
      MANPATH=${MANPATH:-}:/usr/local/man ; export MANPATH
      export LANG=ja
    6. $ exit
  13. mplus_bitmap_fonts-2.2.4.tar.gz をダウンロードする。
  14. mplus_bitmap_fonts-2.2.4.tar.gz を cygwin\home\<username> に移動する。
  15. cygwin を実行 (cygwin のショートカットをクリックする)。
    1. $ tar zxvf mplus_bitmap_fonts-2.2.4.tar.gz
    2. $ cd mplus
    3. $ ./install_mplus_fonts
    4. $ cd ..
    5. $ cat >> ~/.bashrc
      xset fp+ /usr/X11R6/lib/X11/fonts/mplus
    6. $ exit

 やっと, FontForge が使える。

**参考サイト
   MS-Windows 上の cygwin への FontForge のインストール手順
   FontForgeを使う

追記(7/17):

 みなさーん,いいお知らせです!! FontForge for Windows が普通に動くようになってるよぉ。現時点のバージョンは, 20-06-2014 みたい。

「自作 WOFF を作ってみた-#1。」への6件のフィードバック

    1. りりさん,こんばんは。

      もしかしたら,キャッシュが見えてるのかな。
      それとも,ブラウザのサポートレベルの問題でしょうか。

      うちのWin7上のIE11でも「最新の情報に更新」しないと見えませんでしたので,ひとまず,強制的に再読み込みさせてみてください。手書きの「変な字」が見えるはずです。

      1. おはようございます。
        再読み込みしたら見られました。IEのキャッシュのほかに、ここに書いたように
        http://todos.xsrv.jp/3patioused/todos.cgi?no=12
        SuperFetchのキャッシュもあるし、o6asanさんのところは良く閲覧しているので、アクセスする前からSuperFetchされているかも?
        新しい画像ショットです。
        http://todos.xsrv.jp/uploader/upl/o6font2.png
        学生時代にレタリングはやったことがありますが、o6asanさんの文字には、ちゃんと線などに法則性があって素晴らしいです!

        1. りりさん,おはようございます。

          無事,見えたようでよかったです。

          > ちゃんと線などに法則性があって素晴らしいです!
          ありがとうございます。まともな字には,子供時代からコンプレックスがあるので,「変な字」で頑張ってみました。

          ところで,キャッシュって,いろんなところで使われてますね。SuperFetchはネット上のものまで,あらかじめ取りに行くんですか。説明を読んでも,先読みがどの程度なのか,今一つつかめてないのですが。

          勝手にアクセスに行くんだと,ちょっと,怖いです-保安上の話ですが。まあ,いきつけのとこでも,知らないうちに,ゼロデイを使われて,悪いものが仕込まれているってことが,無きにしも非ずで。

          FireFoxにはブラウザ単独で,“network.prefetch-next”というのがあるのですが,切って使ってます。怖がり過ぎでしょうか。

          1. >勝手にアクセスに行くんだと,ちょっと,怖いです-

            いえ、違います。ネット上のを取りに行くなら最新版になるかと思います。
            SuperFetchは、ハードディスク内のよく使われるアプリやファイルを先を見越して、メモリーにロードしておくというものです。ですから、それを使おうとしたとき、あっという間に出てくるのですね。IEのキャッシュはHDDにありますが、もしかしたら、その中でもよく使われるものは、事前に、SuperFetch・メモリーに確保されているかも?と思ったのです。

          2. > ネット上のを取りに行くなら最新版になるかと思います。
            そういえばそうですね。

            > アクセスする前からSuperFetchされているかも?
            で,アクセスを,何となくインターネットにアクセスと,勘違いしてしまいました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください