0

非常によく設計されたサイト (http://www.distinctlydeutschland.com/) でこのスニペットを見つけました。

@font-face {
    font-family: 'TrajanProBold';
    src: url('trajanpro-bold-webfont.eot');
    src: url('trajanpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('trajanpro-bold-webfont.woff') format('woff'),
         url('trajanpro-bold-webfont.ttf') format('truetype'),
         url('trajanpro-bold-webfont.svg#TrajanProBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

私は現在 Google Fonts を使用しており、CUFON を使用しています。これは、CUFON とは異なり、より多くのフォント選択を提供し (おそらく独自のフォント ファイルをアップロードできるため)、ユーザーがテキストをドラッグして選択できるため、より良い代替手段のようです。 .

問題は、この構文が何を意味するのか、ファイル (.woff、.eot など) がどのように作成されるのか、それらすべてが何をするのかなどがわからないことです。それとも、これは Web フォント サービス プロバイダーによって生成されたものですか?

4

1 に答える 1

1

@ font-faceは、CSS内で使用するフォントを定義する方法です。そのベースから、以下を使用して、クラスが次の要素にフォントを設定しますclassname。

.className {
    font-family:TrajanProBold;
}

特定のフォント形式は特定のブラウザでのみ機能するため、複数のフォールバックがあります。

ここに、どのフォーマットがどのブラウザで機能するかの表があります：http: //www.stunningcss3.com/resources/fontface-file-types-browser-support.html

@ font-faceの詳細：http ：//sixrevisions.com/css/font-face-guide/

于 2012-05-02T22:09:40.887 に答える