1

短縮版

css プロパティの最初の項目と同じフォントを使用できるのに、ここの 2 つのセクションのレンダリングが異なるのはなぜですか?font-family:

エクストラロングバージョン:

私が知る限り、css の「font-family」プロパティには、左から右に優先順位が付けられたフォントのリストが含まれています。最初のフォントが見つかった場合、リスト内の他のフォントは問題になりません。

プロパティ値は、フォント ファミリ名および/または一般的なファミリ名の優先順位付けされたリストです。w3.org

と

font-family プロパティは、「フォールバック」システムとして複数のフォント名を保持できます。ブラウザーが最初のフォントをサポートしていない場合、次のフォントを試します。w3schools.com

したがって、次の html があり、2 回繰り返されます。1 回は #font-simple-stack 内にあり、もう 1 回は #font-full-stack div 内にあります。

<h1 class="serif">
    <abbr title="EtaBits">ηBits</abbr> Syria</span>
    <small> Web Development &amp; Solutions</small>
</h1>

<p class="sans-serif"><strong>EtaBits</strong> is your ultimate online business partner, it helps your business whether it is internet-based or internet-promoted.</p>
<p class="sans-serif"><strong>EtaBits</strong> is a Syria based Web Consultancy, Development &amp; Solutions firm. We aim at providing you with exactly what you need to reach your users and clients.</p>

...および次のフォント css 定義:

#font-simple-stack .serif {
    font-family: 'Roboto Slab', serif;
}
#font-simple-stack .sans-serif {
    font-family: 'Open Sans', sans-serif;
}

#font-full-stack .serif {
    font-family: 'Roboto Slab', "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}
#font-full-stack .sans-serif {
    font-family: 'Open Sans', "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}

2 つのカテゴリの最初のフォントRoboto Slab&Open Sansは、どちらも Google フォント API から読み込まれます。

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700" />

#font-full-stack 内でも #font-simple-stack 内でも、どちらの場合も同じ結果になると予想されますが、実際には、2 つのスタックのレンダリングは異なります。

Ubuntu 12.04 x64 マシンの下で、Firefox と Chromium の両方でテストしました。

4

4 に答える 4

1

たとえば、ブラウザーの適切な開発者ツールで適用されている CSS を表示することでわかるように、Roboto Slab フォントは使用できません。その理由は、ウェイト 600 のそのフォントを要求しているのに、そのような書体が利用できないためです。Roboto SlabのGoogle 情報によると、使用可能な重みは 100、300、400、700 です。

于 2013-10-17T10:31:04.233 に答える