CSS3のこのフォントフェイスはCSSファイルに埋め込まれていますか？

Question

私はページの読み込み時間を高速化する方法を検討していました。カスタムCSS3 @ font-faceフォントをページに読み込む必要があります。

私はいくつかの他のサイトのソースコードを見て、どうにかしてフォントを持っていることに気付いていました。以下は

あなたはcssファイルを見てみる場合は、CSSに埋め込むフォントがあり、basecamp.comからのサンプルです：

@font-face { 
    font-family: 'ProximaNova'; 
    src: url(data:font/opentype;charset=utf-8;base64,d09GRgABAAAAA0ABIAAA...[redacted]..xBeTUFYWAA==) format("woff"), url(data:font/truetype;charset=utf-8;base64,AAEAAAASAQAABAAgRkZUTWAFSKIAAAE...[redacted]...EsBYgRbIVHgIrsQNGditEWbAUKw==) format("truetype"), url("/assets/fonts/ProximaNova-Reg-webfont.svg#ProximaNovaRegular") format("svg"); 
    font-weight: normal; 
    font-style: normal; } 

はどのようにこの形式にフォントを回して行くのでしょうか？これはどのように作動しますか？

負荷時間が数百ミリ秒に短縮され、サーバーへの要求が減少する可能性があるため、全体的には良いアイデアのようです。

ありがとうございました。

Answer 1

data URLsは、実際のリソースデータをURL自体に埋め込むことができます。小さなリソースの場合は非常に便利ですが、大きなリソースの場合はそれほど簡単ではありません。なぜなら、それらはbase64としてエンコードされ、埋め込みテキストリソースが膨らむからです。あなたがする必要がどのような

は（オンラインコンバータの数がthis oneのように、ある）base64でエンコーディングを使用して、それぞれのフォントファイルをエンコードし、データのURLに正しいコンテンツタイプを指定しています。