タグ: WOFF

　「自作 WOFF を作ってみた-#2。」の続きです。

　前回で， ttf ファイル(Untitled1.ttf)を手にしたので，これから， WOFF ファイルを作る。まず，サブセット化し，後に WOFF ファイルを作る。実のところ，できた ttf には 31 文字しか含まれていないのだが，それでもサブセット化すると小さくなったので，この作業もやる意味はある。

　ネット上に，結構いくつも， ttf から woff を作ってくれるサイトがある。例えば， Webfont Generator とか ttf to woff converter とか Font2Web とか。日本語に対応しているところもあるし，対応していないところもある。コマンドライン系のツールで， sfnt2woff などもある。しかし，今回，私は武蔵システムが配布している WOFFコンバータという Windows 2000／XP／Vista／7／8 でも Mac OS X 10.6 以降でも動くありがたいソフトを使った。彼らはさらに，サブセットフォントメーカーまで配布してくれている。ありがたく使わせていただいた。本当に，感謝に堪えない。

1. サブセットフォントメーカー と WOFFコンバータをインストール。
2. サブセットフォントメーカーを実行。   — Fig.1
3. ２が済むと， WOFFコンバータ が自動的に起動する。   — Fig.2

　以下の３つのファイルが作られる。
　　　　　・Untitled1_sub.html
　　　　　・Untitled1_sub.ttf
　　　　　・Untitled1_sub.woff

　Untitled1_sub.html をテキストエディタで開けてみれば，必要な css コードは分かる。

　私の目的は，この WOFF を ‘Sugar and Spice’ の子テーマで―これをこのブログのテーマに使っているのだが―使うことだから，必要な変更を style.css に書き加えた。現時点の子テーマの style.css を以下に載せておく。太字の斜字体部分が今回の変更点である。当然ながら WOFF ファイルは，サーバにアップロードしておかなくてはならない。
　で，ウィジェットタイトルは，どんなふうになったかというと，この記事の右上の画像のように変わったわけだ。 WOFF ファイルのサイズはわずかに 10.8KB である。まぁ，なんちゅうか，自己満足の世界だけどねぇ （エへへ）。

　任務完了!! 拍手うーーーーーー。

/*
Theme Name: J blog
Theme URI: http://webtuts.pl/themes/sugar-spice
Description: sugarspice Child Theme
Author: Aleksandra Laczek
Author URI: http://webtuts.pl
Template: sugar-and-spice
Tags: light, white, gray, two-columns, fixed-layout, responsive-layout,
custom-background, custom-menu, featured-images, theme-options, threaded-comments,
translation-ready, full-width-template
Text Domain: sugarspice-child
*/

@import url("../sugar-and-spice/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
@font-face {
font-family: 'MyFont';
src: url('Untitled1_sub.woff の URL を記入') format('woff');
}

body {
color: #000;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
color: #000;
}

/* Calendar Widget */
table th,
table td{
color: #000;
background: transparent;
border: none;
text-align: left;
}

.widget-title em {
font-family: 'MyFont';
font-size: 26px;
font-style: normal;
padding-left: 3px;
}

/* 07. Forms & buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
color: #000;
}

/* #Forms */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea,
select {
color: #000;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
color: #000;
}

label span,
legend span {
color: #000;
}

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

　「自作 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 みたい。