挑戦する
LICE-ユーザーのコンピューターにインストールされていないプラグインフォントでテキストをスタイリングするときに発生する効果。 接続されているフォントがまだダウンロードされていない場合に表示され、この要素の
font-family
プロパティの値から定型化されたテキストが次のフォントで表示されます。 このようなフォントの切り替えは、要素内のテキストのサイズに依存している場合、要素のサイズにも影響します。
効果はFOUTとしても知られています-Paul Irish がそれを呼んだように。
一般的なポイントでは、機能もあります。 たとえば、Firefoxでは、非標準フォントで描画する必要があるテキストは3秒間表示されませんが、Chrome では同様の遅延があります。 この時間中にフォントをダウンロードする時間があれば、テキストはすぐに目的のフォントで表示されます。
このトピックに関する記事がありました。 VOSHの効果は、フォントを使用した有能なゲームによって平準化されることを推奨しました。 残念ながら、標準のフォントと特性があまりにも異なるフォントが接続される場合があります。
解決策
LOSSを排除するために、
data:uri
を使用してメインスタイルシートでフォントを指定し、ページとともにフォントがすぐに表示されるようにしました。
ほとんどの訪問者のブラウザが理解し、ダウンロードに便利なフォント形式を選択することは変わりません。 プラグインフォント形式の幅広いサポートについては、 こちらをご覧ください 。
eot
フォントは最も軽量ですが、IEのみがサポートされています。
ttf
と
svg
フォントは重く、もちろんフォントによって異なります
eot
と
woff
2倍のスペースを
eot
し
woff
。 私の状況では、
woff
を選択し
woff
。この形式は、訪問者のほとんどのブラウザーでサポートされています。
woff
が理解できないブラウザがまだあるため、それらの代替手段が示されています。
IEバージョン8以前は
woff
フォントを理解していないため、
woff
が必要
eot
。 同時に、IE8は
data:uri
内のファイルを理解しません。uriは32Kよりも重いため 、古いバージョンではまったく認識されません。したがって、個別のスタイルファイルでフォントファイルへのリンクを指定するだけです。 これらのブラウザーが不要なものをロードしないように、
woff
および他の形式のフォント接続は、別個のスタイルシートで強調表示され、条件付きコメントで区切られています。
また、ChromeのVinでは、
svg
フォントは他のフォントよりも見た目が良いという意見がありますが、これは好みの問題のようです。 この形式のフォントは、
gzip
を使用する他のフォントよりも圧縮率が高くなりますが 、FirefoxおよびIEではサポートされていません。
したがって、次のコードを使用してフォントをロードできます。
<!-- --> <!--[if lte IE 8]> <link rel="stylesheet" href="fonts_ie.css" media="all"> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="fonts.css" media="all"> <!--<![endif]--> <link rel="stylesheet" href="main.css" media="all">
/* fonts_ie.css */ @font-face { font-family: 'PT Sans Narrow'; font-style: italic; font-weight: bold; src: url('PTS76F_W.eot'); }
/* fonts.css */ @font-face { font-family: 'PT Sans Narrow'; font-style: italic; font-weight: bold; font-variant: normal; src: url('data:application/x-font-woff;base64,d09GRgABAAAA...aCw0AAA==') format('woff'), url('PTN77F_W.svg#PTSans-NarrowBold') format('svg'), url('PTN77F_W.ttf') format('truetype'); }
/* main.css */ body { font-family: 'PT Sans Narrow', 'Arial Narrow', sans-serif; font-style: italic; }
この方法を使用する場合、VOSHはサポートされていない
woff
フォントのみに
woff
、体系的にユーザーにブラウザーを失います。現時点で最も一般的なのはIE8です。
このページでは、フォントは伝統的に接続されています。
フォントはここでエンコードされます。
接続が遅い場合、この効果はより顕著になります。
特徴
この手法を使用する場合、
woff
のフォントを理解しないが、それらをダウンロードする必要のあるブラウザーが残っていることを理解する
woff
があります。 ここでは、このようなブラウザを使用する訪問者の数と訪問の生産性がすでに役割を果たしています。 私の状況では、LICEを排除する方が良いことがわかりました。
ローカルにインストールされていても、フォントはダウンロードされます。 これは、スタイル間の競合を防ぐためです。 必要に応じてダウンロードします。
フォントを含むフォントファイルがダウンロードされるまで、ページは描画されません 。
また、このメソッドは、
data:uri
を使用したダウンロードを許可しないライセンスを持つフォントには適していません 。
そして、もちろん、ロードされたフォントに関するすべての問題に対する保証された解決策は、それらの使用を拒否することです。 真剣に、時々彼らは役に立たない。
追加情報
プラグインフォントについて学ぶための素晴らしい出発点 。
通常どおりにフォントを接続する必要がある場合。 このメソッドを適用した後に気づいたコメントを次に示します。
接続の機能について少し。