web-dev-qa-db-ja.com

Webフォントをbase64に変換およびレンダリング-元の外観を維持

Smashing Magazineの遅延フォント読み込みロジック に触発されて、サイトでのフォント読み込みを延期したい。

この主な部分は、フォントをbase64に変換し、CSSファイルを準備することです。これまでの手順：

  1. Google Web Fonts でフォントを選択してダウンロードします。
  2. Font Squirrel Webfont Generator を使用して、ダウンロードしたTTFファイルをbase64埋め込みWOFFフォントを含むCSSファイルに変換します（エキスパートオプション-> CSS-> Base64エンコード）。
  3. 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をご覧ください。 GWF vs base64 rendering comparison

特に、アクセントが途切れ、絶対に恐ろしい文字aに注意してください。他のフォントファミリとバリアントは、非常に著しく異なって見えます（サイズと形状の歪みなど）。

そこで質問は：Google Web Fonts（または他のソース）からTTFファイルをbase64形式に適切にエンコードし、結果が元のファイルと同じになるように使用するにはどうすればよいですか？

cssfontsbase64webfontsgoogle-webfonts
38
smajl

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情報を調整する必要がある場合があることに注意してください。これは単なるテンプレートの例です）

58
djangodude