2012-03-07 4 views
0

私はFont AwesomeにあるWebページを見ています。このページを開くと、Font Awesomeのフォントアイコンがすべてレンダリングされます。 IEで表示するフォントアイコンを取得する際に問題が発生していますが、IEでこのページが表示されるため、どのように組み立てられるのか解読しようとしています。 site.cssとbeautify.cssを見ると、@ font-faceディレクティブはどこにもありません。それでも、site.cssは、フォントファミリ指定子の 'FontAwesome'を参照します。誰かがこのページで「FontAwesome」がどのように解決されているのか教えていただけますか?このウェブページでこのフォントはどのように読み込まれていますか?

UPDATE

Ergg、どのように私はこれを見逃したのか?申し訳ありません...

答えて

3

を参照してください@font-faceかなりの数の定義があります:

@font-face{ 
    font-family:'MuseoSans'; 
    src:url('../font/museosans_300-webfont.eot'); 
    src:url('../font/museosans_300-webfont.eot') format('embedded-opentype'), url('../font/museosans_300-webfont.ttf') format('truetype'); 
    font-weight:normal; 
    font-style:normal 
} 

@font-face{ 
    font-family:'MuseoSans'; 
    src:url('../font/museosans_500-webfont.eot'); 
    src:url('../font/museosans_500-webfont.eot') format('embedded-opentype'), url('../font/museosans_500-webfont.ttf') format('truetype'); 
    font-weight:bold; 
    font-style:normal 
} 

@font-face{ 
    font-family:'MuseoSlab'; 
    src:url('../font/museo_slab_300-webfont.eot'); 
    src:url('../font/museo_slab_300-webfont.eot') format('embedded-opentype'), url('../font/museo_slab_300-webfont.ttf') format('truetype'); 
    font-weight:normal; 
    font-style:normal 
} 

@font-face{ 
    font-family:'MuseoSlab'; 
    src:url('../font/museo_slab_500-webfont.eot'); 
    src:url('../font/museo_slab_500-webfont.eot') format('embedded-opentype'), url('../font/museo_slab_500-webfont.ttf') format('truetype'); 
    font-weight:bold; 
    font-style:normal 
} 

@font-face{ 
    font-family:'FontAwesome'; 
    src:url('../font/fontawesome-webfont.eot'); 
    src:url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); 
    font-weight:normal; 
    font-style:normal 
} 
は、
2

私がsite.cssとbeautify.cssを見ると、@ font-faceディレクティブはどこにもありません。

はい、あります。

Here!

1

あなたは(近端)site.cssを見れば、あなたは@font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot')[...]を見つけるでしょう。クロスブラウザ@font-face作品を作るための方法を詳細に

http://sixrevisions.com/css/font-face-guide/

関連する問題