0

ウェブページにフォントを埋め込んでおり、div でランダムに font-style = italic と font-weight=700 を使用しています。

私の @font-face ルールは次のとおりです。

 @font-face {
    font-family: 'Arimo';
    src: url('fonts/arimo_bold_italic.eot');
    src: url('fonts/arimo_bold_italic.eot?#iefix') format('embedded-opentype'),url('fonts/arimo_bold_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

font-style と font-weight の追加はすべてのブラウザーで正常に機能しますが、Safari 3.2 では機能しないようで、スタイルと重みが時々ランダムに適用されるなどの奇妙な結果が生じます。

解決策はありますか？

4

1 に答える 1

0

書体を通常の太さ、レギュラー (斜体ではない) として指定しています。これは可能であり、ブラウザーの制限を克服するためによく使用されます。また、FontSquirrel が生成する CSS ファイルで使用する方法でもあります。しかし、それには意味があります。

この場合、font-family: Arimo単独では太字の斜体の Arimo が生成されます。これは、名前を定義した方法だからですArimo。ブラウザにとってArimoは、通常の太さの通常のフォントにすぎないため、CSS で、bまたはiマークアップなどを介して間接的に、太字または斜体で使用するように要求すると、ほとんどのブラウザはそのフォントをそのまま使用します。

CSS 2.1フォント マッチング アルゴリズムによると、斜体 (または太字の斜体) が要求された場合、通常の書体は一致するとは見なされません。これは、ルールでセカンダリ フォントが指定されていない限り、ブラウザーがデフォルトのフォントにフォールバックする必要があることを意味します。実際にこれを行うブラウザはありません。Safari は、アルゴリズムでグリフを傾斜させることによって「合成イタリック」を生成しますが、他のほとんどのブラウザは通常のフォント (つまり、そのように宣言されているため、通常と見なされるフォント) を使用します。CSS3 では、ほとんどのブラウザーの動作が標準になるように、これが変更されます。

したがって、これは厄介なビジネスであり、混乱を避けるために、次のいずれかのアプローチを使用します。

a) ここで行ったように、各フォント フェイスを独自のファミリとして、regular および normal-weight として宣言し、そのようなフォントのテキストにfont-style normal`以外の値を直接的または間接的に適用しないでください (注:多くの HTML 要素が斜体または太字を生成する (デフォルト)。font-weightnormal' orvalues other than

b) 各フォント フェイスをファミリ内のフォントとして宣言し、論理的な方法font-weightでfont-style設定し@font-face、通常の方法でフォント ファミリを使用し、font-weight: bold太字が必要な場合などを宣言します。これが、Google によってホストされている場合の Google Web フォントのしくみです。

PS `@font-face' ルールが WOFF 形式のファイルに言及していないのは奇妙です。これは、ブラウザがサポートしている場合にダウンロード可能なフォントの好ましい形式です。通常、ジェネレーターもそれを生成し、ルールに含めます。

于 2013-02-27T07:10:31.497 に答える