挑戦する
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ではサポートされていません。
したがって、次のコードを使用してフォントをロードできます。
<link rel="stylesheet" href="fonts.css" media="all"> <link rel="stylesheet" href="main.css" media="all">
@font-face { font-family: 'PT Sans Narrow'; font-style: italic; font-weight: bold; src: url('PTS76F_W.eot'); }
@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'); }
body { font-family: 'PT Sans Narrow', 'Arial Narrow', sans-serif; font-style: italic; }
この方法を使用する場合、VOSHはサポートされていない
woffフォントのみに
woff 、体系的にユーザーにブラウザーを失います。現時点で最も一般的なのはIE8です。
このページでは、フォントは伝統的に接続されています。
フォントはここでエンコードされます。
接続が遅い場合、この効果はより顕著になります。
特徴
この手法を使用する場合、
woff のフォントを
理解しないが、それらをダウンロード
する必要のあるブラウザーが残っている
ことを理解する woffがあります。 ここでは、このようなブラウザを使用する訪問者の数と訪問の生産性がすでに役割を果たしています。 私の状況では、LICEを排除する方が良いことがわかりました。
ローカルにインストールされて
いても、フォント
はダウンロードさ
れます。 これは、スタイル間の競合を防ぐためです。 必要に応じてダウンロードします。
フォントを含むフォントファイルがダウンロード
されるまで、ページ
は描画されません 。
また、このメソッドは、
data:uriを使用したダウンロードを許可しないライセンスを持つフォントには適していません 。
そして、もちろん、ロードされたフォントに関するすべての問題に対する保証された解決策は
、それらの使用
を拒否することです。 真剣に、時々彼らは役に立たない。
追加情報
プラグインフォントについて学ぶための素晴らしい
出発点 。
通常どおりにフォントを接続する必要がある場合。 このメソッドを適用した後に気づいたコメントを
次に示します。
接続の機能について少し。