2014年10月7日火曜日

【備忘録】CSS3のWebフォントの使い方（ビルマ語編）

直接的にはWordPressから離れますが、しかしデザイン系として今後使う機会があるかもしれないので、ここにメモ。

CSS3の新機能を使うとは思いませんでした。
しかもいろいろ苦労したので纏めておきます。

ビルマ語表示できな〜い

という問題に直面したんですよ。
昔だったら、「フォント入れたら動くよ！」って終了してたんですが、他の方法はあるかなーと思ったら、あるんですね。。。全然CSSウォッチしてなかった。。。


Step 1. フォントをダウンロードする


あたりからダウンロードしてください。
ライセンスなどはご自身で確認を！

以下説明のために「ZawgyiOne2008.ttf」をダウンロードしたと仮定します。

Step 2. ブラウザごとに利用できるフォントタイプに変換

そこは業界で統一してほしいなぁと思いますが、まぁそうなっていないんですよね...
によれば、
  • Internet Explorer 4-8: EOT形式
  • Internet Explorer 9以降: WOFF形式
  • Firefox: TTF形式
  • Opera: SVG形式
  • Chrome: TTF形式
  • Safari: TTF（iOS4のSafariは、SVGのみ）
まぁざっくりこんな感じ。何故こんなに統一性がないのか。。。。
検証の結果、現行のOperaはEOT, WOFF, TTFのどれかに対応しているようで、SVG指定しなくても動きました。まぁでもどうせだから
  • EOT, WOFF, SVG, TTF
の４つを指定したらいいんだよね！ってことで話を進めます。

変換はどうしたらいい？

あたりの力を借りたらいけます。
だけど私はエンジニア！上記をつかわずにコマンドでやるってのが粋ってなことで、その方法をメモっておきます。不要な人は上記サイトから、さくっと変換してくださいな。

TTFからWOFF形式へ

世の中、いい人がいるものです。
ダウンロードして、ターミナルから
chmor 755 sfnt2woff

した上で、

./sfnt2woff  ZawgyiOne2008.ttf

とするとですね。
ZawgyiOne2008.woff
を作ってくれます！！

TTFからEOTは？

MacOSXの場合には、XcodeにCommand Line Toolsのインストールが必要です。
ダウンロードして、圧縮ファイルを展開（解凍）、その場所で

make

してコンパイルします。

後は、

./ttf2eot  ZawgyiOne2008.ttf > ZawgyiOne2008.eot

ですね。

TTFからSVGは？

ってことみたいなのですが、うまく使えず。

Step 3. Fontの定義（font-face）

WebフォントのCSS指定2014年度版とこれまでの歩み（ウェブクリ8.jp）からの情報にて、

という情報を得てこれに変更。


CSSの構成について
style.css
┗ fonts（フォント入れとく）

とします。
ビルマ語のケースなら、

@font-face {
font-family: 'Zawgyi-One';
src: url('fonts/ZawgyiOne2008.eot'); /* IE9 Compat Modes */
src: url('fonts/ZawgyiOne2008.eot?iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/ZawgyiOne2008.woff') format('woff'), /* Pretty Modern Browsers */
               url('fonts/ZawgyiOne2008.ttf') format('truetype'), /* Safari, Android, iOS */
               url('fonts/ZawgyiOne2008.svg#svgFontName') format('svg'); /* Legacy iOS */

}

となります。
EOTが曲者でした。Internet Explorer 8（WinXP）で確認しました。

Step 4. 利用

利用したいタグやクラスなどに対して

 font-family: 'Zawgyi-One';

を設定するだけです。

2014年10月7日　作成 @kimipooh
2015年3月9日　加筆 @kimipooh

投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)