概要
.tteの外字フォントを、ブラウザで確認したい時にやった手順をメモしておく。
手順
1. woff にコンバートする
ブラウザで確認するため、Webフォントの形式に変換する必要がある。
今回はWOFFコンバータを利用した。
2. 文字コードを確認する
外字に割り当てられている文字コードを確認する必要がある。
今回はFontForgeを利用した。
フォントを開いたら、割り当てを見て、外字が登録されている範囲を調べてメモしておく。
3. 特殊文字を生成するスクリプトを作成
FontForgeで割り当てを見て、仮に外字が5,000〜6,000番目まで登録されていた場合、次のように特殊文字形式で一括出力する。
irb(main):007:0> numbers = 5000..6000
=> 5000..6000
irb(main):016:0> numbers.each { |n| print "&##{n};" }
ᎈᎉᎊᎋᎌ…（省略）
=> 5000..6000
4. HTMLに埋め込む
外字フォントを読み込ませた上で、先ほど生成した特殊文字をコピペで貼り付ける。ブラウザで確認して、外字が無事表示されていればOK。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: "sample-font";
src: url("EUDC.eot?") format('eot'),
url("EUDC.woff") format('woff');
}
.container {
font-family: "sample-font";
}
</style>
</head>
<body>
<div class="container">
<p>ᎈᎉᎊᎋᎌ…（省略）</p>
</div>
</body>
</html>