ホームページ > ウェブフロントエンド > CSSチュートリアル > 外観に影響を与えずに Web フォントを Base64 に変換するにはどうすればよいですか?

外観に影響を与えずに Web フォントを Base64 に変換するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-26 10:35:15
オリジナル
756 人が閲覧しました

How Can I Convert Web Fonts to Base64 Without Affecting Their Appearance?

信頼性を損なうことなく Web フォントを Base64 に変換してレンダリング

遅延フォント読み込み技術が普及するにつれ、Web フォントを Base64 に変換することが不可欠になりました。ただし、直接変換すると、フォントの外観に顕著な違いが生じることがよくあります。この問題は、変換プロセス中に TrueType 命令 (ヒント) が変更されることが原因で発生します。

元のフォントの忠実性を維持するには、Font Squirrel Expert の [TrueType ヒンティング] オプションが [既存を維持] に設定されていることを確認してください。このオプションは既存のヒントを維持し、レンダリングに影響を与える可能性のあるフォントの変更を防ぎます。

また、Google Web Fonts から直接フォントをレンダリングできる場合は、フォント ファイルを抽出して自分で 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 パラメータを変更することを忘れないでください。これらの方法に従うことで、Web フォントの外観を元のファイルと同一に保ちながら、Web フォントを Base64 に正常に変換できます。

以上が外観に影響を与えずに Web フォントを Base64 に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート