カテゴリー: WordPress

　「自作 WOFF を作ってみた-#1。」の続きです。
　やっと， FontForge が使えるようになったんだが， fontforge_cygwin-20090914.tar.bz2 くん，とにかく不安定。でもまあ，なんとか動く。 FontForgeSetup_2012-07-31_Windows.exe では，エラーが出たし， fontforge-20090923-1.i386.rpm は，さらに不安定だった。というわけで，ほかに道もなさそうなので， fontforge_cygwin で行く。 FontForge for Windows が使えるようになっているので，そちらを使ったほうが早い。追記参照。
　ところで， ttf ファイルの作り方を書いていくわけだが，ここを参考にする方がいたら，以下のことに留意しておいてほしい。手順通りにやれば，多分使えるレベルの ttf ファイルはできると思う。しかし，今回私が必要とするのは，大したものではないので，ちゃんとした ttf ファイルを作るために必要なことの多くを書いていない。もし，ちゃんとしたものを作ろうと思うなら，ご自分で更なる情報を集めていただきたい。手前味噌だが，一通り私の手順をやってみてからのほうが，下記のチュートリアルに書いてあることが飲み込みやすいと思う。
　FontForge についての詳しい話は，チュートリアルにあります。
 
**地道に #2**

1. cygwin を実行 (cygwin のショートカットをクリックする)。
   $ xinit   — 図１

   X の大きな窓が開く。
   [注] WOFF のために，作業フォルダを作っておいたほうがよい。名前は MyFont とでもして， cygwinhome<username> に置く。 Inkscape SVG はすべてこの中に入れておくと，後の作業に便利である。

2. $ cd MyFont
   $ fontforge -new   — 図２
   右上隅に新しい窓が現れる。
3. ***フォントの作成開始
   1. 日本語フォントを作るので，Reencode を使って JIS 212 (Kanji) にする。   — 図３
   2. ****半角文字の作成

      例として半角文字の “p” を作る。緑色にしてあるところをダブルクリックする。   — 図４
      さらに，別の窓が左側に現れる。   — 図５

   3. ‘Import’を使う。   — 図６
   4. ‘Image’ をクリックして，出てきたドロップダウンメニューから ‘SVG’ を選択する。   — 図７，図８
   5. p.SVG をダブルクリック。   — 図９
   6. ‘Close’ する。   — 図10
   7. “p” は半角文字なので ‘Metric Window’ を使って幅を縮めてやる。   — 図11
   8. 幅を ‘1000’ から ‘500’ に変更。   — 図12
   9. ‘Metric Window’ を閉じる。   — 図13
   10. ここまでの作業を sfd file (default: Untitled1.sfd) に保存する。   — 図14, 図15
       [注] FontForge がちゃんと動けば，ここでの保存作業必要ないのだが，うちの環境では，なにしろ，不安定だったので，こまめに保存した。
   11. [注] 半角文字を作るときは， ２(図４) から10(図15) の繰り返しになる。
        
   12. ****全角文字の作成

       全角文字の例として， “ン” を作る。全角文字を作るときは， ‘View’ → ‘Goto’ の機能を使う。文字の場所が見つけにくいからね。   — 図16

   13. “ン” を検索窓にコピー＆ペースト後，[OK]。うちの環境では，キーボードから直に “ン” の入力はできなかった。   — 図17
   14. 黄色くなっているところをダブルクリック。   — 図18
       図５から図８をやる。
   15. U+30F3.SVG をダブルクリック。   — 図19，図20
       [注] ‘U+30F3’ は’ン’のユニコードである。可能なら，ン.SVG とかのほうが便利なのだが，うちの環境では， FontForge 内では文字化けした。仕方がないので，半角文字でのファイル名になった。
   16. 窓を閉じる。   — 図10
   17. 前に作った sfd ファイルに，ここまでの作業を保存する。   — 図14
   18. [注] 作業を中断する場合は，図21，図22，図23 をやって， cygwin を抜ける。
   19. [注] 作業の再開時は， “fontforge -new” の代わりに， “fontforge 自分の sfd ファイル名” をタイプすると，前の sfd ファイルが使える。
   20. 必要な文字分，作業を繰り返す。最終的に，必要な glyph を含んだ sfd ファイルができることになる。
   21. さて， ttf を作る。   — 図24，図25
       [注] ‘Validate Before Saving’ のチェックは，外しておく。いろいろ，検査をしてくれるみたいだが，今の場合は，外しておいたほうが，無難です。
4. やっと， ttf ファイルができた。

　次回が，最終回になります。

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

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

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

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

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

　はじめまっせ。

**地道に**

1. 31 文字を手書きした。字に自信はないので，もとから変な形にした。ハハハ。右のタイトルの字をご覧あれ。
   テーマを替えちゃったので、サイドバーに自作の文字がなくなったのを忘れてた。こんなのだったんだよ。 ☞
2. 書いた文字をスキャンして， png ファイルにする。 jpg でしか保存できないなら，コンバータがいる。後で， Inkscape をインストールするから，これをコンバータにしてもいい。ちょっと，使いにくいが。
3. １文字ずつ， 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 を１枚開く。画像上でクリックして，フォーカスを当てる。
   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を使う

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