Web フォントを読み込むために Base64 変換後に元のフォントの外観を維持するにはどうすればよいですか?

Base64 への変換時に元のフォントの外観を維持する

フォントの読み込みを遅延すると、Web サイトのパフォーマンスが向上します。重要な手順の 1 つは、フォントを Base64 に変換し、CSS ファイルに組み込むことです。ただし、フォントを Base64 に変換すると、フォントの外観が変わる場合があります。

Base64 変換後にフォントの元の外観を維持するには、次の手順を実行してください:

1. Font Squirrel 設定の最適化:
   Font Squirrel Webfont Generator を使用する場合は、「既存を維持」を選択しますエキスパート設定の「TrueType ヒンティング」オプションで。
2. オリジナルの GWF ファイルを使用:
   Google Web Fonts (GWF) から直接レンダリングされたフォントに満足している場合は、ダウンロードしてください元のファイルを作成し、自分で Base64 エンコードします。 OS X または Linux では、base64 コマンドを使用します。

$ base64 -i myfont.ttf -o fontbase64.txt

Windows の場合は、base64 エンコード ツールを使用します。 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 情報を調整します。これらの方法に従うことで、フォントの元の外観を保持しながら、フォントの遅延読み込み用に Base64 エンコードを実装できます。

以上がWeb フォントを読み込むために Base64 変換後に元のフォントの外観を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。