Smashing Magazineの遅延フォント読み込みロジック に触発されて、サイトでのフォント読み込みを延期したい。
この主な部分は、フォントをbase64に変換し、CSSファイルを準備することです。これまでの手順:
Open Sans BoldのCSSスニペット:
@font-face {
font-family: 'Open Sans';
src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format('woff');
font-weight: 700;
font-style: normal;
}
問題はであり、変換されたフォントは大きく異なって見える。 Open Sans Boldをご覧ください。
特に、アクセントが途切れ、絶対に恐ろしい文字a
に注意してください。他のフォントファミリとバリアントは、非常に著しく異なって見えます(サイズと形状の歪みなど)。
そこで質問は:Google Web Fonts(または他のソース)からTTFファイルをbase64形式に適切にエンコードし、結果が元のファイルと同じになるように使用するにはどうすればよいですか?
Font Squirrel Expertオプションで、「TrueType Hinting」オプションを「Keep Existing」に設定してください。他のオプションのいずれかにより、TrueType命令(ヒント)が変更され、フォントのレンダリングに影響します。
代替、GWFから直接フォントのレンダリングに満足している場合は、そのファイルを取得して、base64エンコードを自分で行うことができます。 OS XまたはLinuxでは、ターミナル/シェルで組み込みのbase64コマンドを使用します。
$ base64 myfont.ttf > fontbase64.txt
Windowsの場合、base64でエンコードするプログラムをダウンロードする必要があります(無料のオープンソースツールがいくつかあります)。そのファイルの内容をコピーして、CSSで次のように使用します。
@font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
(特定のフォントデータに一致するように、さまざまな@ font-face情報を調整する必要がある場合があることに注意してください。これは単なるテンプレートの例です)