Categories: WordPress

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

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

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

 間抜けな話だが, 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. 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 を cygwinhome<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 を cygwinhome<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 みたい。

o6asan

View Comments

  • >1.31 文字を手書きした。字に自信はないので,もとから変な形にした。ハハハ。右のタイトルの字をご覧あれ。

    あの…手書きタイトル文字というのがあるのでしょうか?
    このようにしか、見えませんが…
    http://todos.xsrv.jp/uploader/upl/o6font.png

    • りりさん,こんばんは。

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

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

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

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

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

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

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

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

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

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

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

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

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

Recent Posts

WordPress サブドメイン化完了。

7月末からメンテナンス中を掲げ…

2か月 ago

ヒェー、ひどい目にあったゼ。換気扇の交換。

 我が家の離れを1月から貸すこ…

1年 ago

ウォシュレット TCF331 から TCF4713R へ。

 超久しぶりの記事の話題がウォ…

1年 ago

あけましておめでとうございます。

あけましておめでとうございます…

2年 ago

鷹君、初の下剋上にて日本一。

日本一おめでとう!!  わーい…

2年 ago

自鯖で TLSv1.3 をサポート!!

 Apache Lounge …

2年 ago

This website uses cookies.