Site icon Tips Note by TAM

ビルマ語（ミャンマー語）の文字化け対応について

susa

ミャンマー人向けのサイトを作成する必要があった際に言語設定ではまったので、その時の対応方法を備忘録として書いておきます。

ミャンマーでの公用語は ビルマ語（ミャンマー語）です。
ビルマ語のlang属性はlang="my"ですが、このlang属性を設定してテストアップしてみると文字化けが起きてしまいました。
ビルマ語が正常に表示される為には「Zawgyi-One」というフォントをインストールする必要がありますが、
Webフォントで設定すればインストールされていなくても文字が正常に表示されるとのことです。

「Zawgyi-One」をWebフォント化する

フォントのダウンロード

「Zawgyi-One」のフォントはGoogle Code Archiveでダウンロードできます。

ダウンロードページ
Zawgyi-One：https://code.google.com/archive/p/zawgyi/downloads
※フォントのライセンスはGPLです。（参照：https://code.google.com/archive/p/zawgyi/）

ZawgyiOne2008.ttf がダウンロードされます。

ジェネレーターで一括変換

Web Font Generator：https://www.web-font-generator.com/

  1. ダウンロードした「.ttf」ファイルを「Select a TTF or OTF file from your computer」からアップロードする
  2. 「I'm uploading a font that is legal for web embedding. I checked with the author and/or EULA.」にチェックを入れる
    ※ base64でエンコードする必要がなければ「Embed font data in CSS (base64 encode)」にチェックは不要
  3. 「Generate web font」でダウンロード画面へ遷移
  4. ファイルをダウンロードする

ダウンロードされるファイル一覧

Zawgyi-One
├ Zawgyi-One.eot
├ Zawgyi-One.svg
├ Zawgyi-One.ttf
├ Zawgyi-One.woff
├ preview.html
└ styles.css

Webフォント化

cssファイルに@font-face規則を記述して「.eot」「.woff」「.ttf」「.svg」を設定します。
※今回は「preview.html」「styles.css」は使用しません

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

合わせて、フォントを適用させたい要素にfont-familyプロパティでフォントを適用させます

p {
  font-family: 'Zawgyi-One';
}

これでZawgyi-Oneのフォントが適用され、ビルマ語（ミャンマー語）が文字化けしなくなりました！

参考サイト

Webサイトのビルマ語（ミャンマー語）対応まとめ
http://qiita.com/ishizuki/items/d94433fd887dd4211e43