2012-04-23 4 views
0

私は独自のカスタムフォントを追加し、カスタムフォントファミリを表示するために以下のコードを使用しましたが、ページが読み込まれるときにフォントがWeb標準フォントとしてすぐに開始される問題があるようです私が追加したカスタムフォントの更新。ロード効果を持たないカスタムフォントファミリーを使用する最良の方法は?

<style type="text/css"> 
@font-face{ 
font-family:linto; 
src:url(achafsex/Achafexp.eot); 
} 
@font-face{ 
font-family:linto; 
src:url(achafsex/Achafexp.ttf); 
} 
div{ 
font-family:linto; 
font-size:100px; 
width:500px; 
} 
</style> 

は、ページを瞬時にカスタムフォントをロードするようにこれを行うには良いコードがあると明らかに変化する効果を持っていませんか?

答えて

0

このようなシナリオでは、通常、最高のZ-インデックスである「カバー」divを使用してから、ページのロードが完了したら削除してページを表示します。このトリックは、コンポーネントのダウンロードを完了するためにエンドユーザーをポーリングする良い方法を考え出しています。がんばろう!

1

お試しください。あなたがそれを指定するとき

@font-face { 
font-family: 'linto'; 
src: url('linto.eot'); /* IE9 Compat Modes */ 
src: url('linto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('linto.woff') format('woff'), /* Modern Browsers */ 
    url('linto.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('linto.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

次に、使用してみてください:

div { 
font-family: 'linto', Fallback, sans-serif; 
} 

私が見る唯一の問題は、まず、それは、あなたのfontfaceをロードbodyフォントからその最初のロードです。

body { font-family: 'linto', Fallback, sans-serif; }これは負荷の問題を修正するかどうか最初に確認するために、1つのシートに複数のスタイルを持つことには同意できません。

http://css-tricks.com/snippets/css/using-font-face/

関連する問題