2

いくつかの html ドキュメントでは、2、3 語だけに Web フォントを使用しています。完全なフォントファイルをロードするのはパフォーマンス的に無駄に思えます。これは、 @font-face 宣言の unicode-range パラメータの出番です。

http://www.w3.org/TR/css3-fonts/#unicode-range-desc

これにより、フォントファイルのどの文字をロードするかを定義できるため、パフォーマンスが大幅に向上します。しかし、私はそれを機能させることができません。奇妙なことに、Firefox ではすべての文字が表示され、宣言に unicode-range パラメーターを含めただけでは、サファリでフォントを読み込めません。以下は、私がテストしていたhtmlです。

<!doctype html>
<html lang="en">
<head>
<style text="text/css">
@font-face {
font-family: 'dream';
src: url(Fonts/Digital-dream/DIGITALDREAM.ttf) format("truetype");
unicode-range: U+FF21;
}

*{
font-family:dream;
font-weight:normal;
}
</style>
</head>
<body>
<p>ASDWEWQDSCF</p>
</body>
</html>
4

1 に答える 1

8

その値の目的を誤解しています。そのページから：

この記述子は、特定のフォントでサポートされる Unicode 文字の範囲を定義します

したがって、これはダウンロードするグリフ (または文字) ではありません。実際には、フォントに含まれる文字をブラウザに伝えて、最初にフォントをダウンロードする価値があるかどうかをブラウザが判断できるようにします。スタイルが設定されているテキストが指定されていない場合unicode-range、フォントはダウンロードされません。

参照するページの例 XIII は、優れた例を示しています。同じ属性を共有する3 つ@font-faceのルールがあるとします。font-familyただし、最初のルールは、必要なすべての可能なグリフを含む 4.5MB の巨大な TTF ファイルを指しています。2 番目のルールは、はるかに小さい 1.2MB の TTF をリストしますが、すべての文字が日本語のグリフ範囲に収まる場合にのみ使用することを示しています。3 番目のルールには、スタイル設定されているテキストがローマ字のみの場合にダウンロードできる、非常に小さな 190 KB のファイルがリストされています。

于 2011-10-20T20:43:58.457 に答える