9

そのため、IEがここでCSSを無視している理由を理解するのに問題があります。私はこのコードを持っています：

<h2>Har du stadsnät eller kan du få det?</h2>

つまり、奇妙なことは何もありません。そして、これが結果のレンダリングです：

HTMLのレンダリング

ただし、このHTMLのCSSコードは次のとおりです。

.rubrik, h2 {
  font-family: Lato;
  font-size: 32px;
  font-weight: normal;
  line-height: 38px;
  font-variant: normal;
  font-style: normal;
  color: #969696; 
}

これは、H2がフォントの太さとして「通常」である必要があることを明確に示していますが、レンダリングされたテキストは明らかに太字です。これが正しいレンダリングです（Safariから）

正しいレンダリング

そこで、Internet Explorer 8に含まれている開発者ツールを使用して、CSSの解釈を調べます。これは、次のようになります。

CSSの解釈

私が理解しているように、ここで見ているのはIE8によるCSSの解釈であり、疑わしいことに欠落しているのは「通常の」属性です。IEはCSSを「フォント」の1行バージョンに変換しましたが、「通常の」部分は含まれていませんでした。さて、フォント「Lato」はフォントフェイスフォントであり、フォントフェイスCSSはここにあります：

@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato.eot');
    src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype');
}
@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato-Bold.eot');
    src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato-Bold-Italic.eot');
    src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato-Italic.eot');
    src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype');
    font-style: italic;
}

font-weightのfont-face宣言で「normal」を指定しても機能しません。だから私はここで立ち往生していて、IEがH2の宣言に「font-weight：normal」を含めないように私が間違っていることを理解しようとしています...何か推測はありますか？前もって感謝します...

4

2 に答える 2

4

font-family: Lato;IE が混乱している可能性があるため、各 fontface プロパティの名前を変更する必要があると思います。font-family: Lato-bold;代わりに、などを入れてみてくださいfont-family: Lato-italic。また、フォントにボールド体がある場合 (Lato のように、fontface プロパティで参照されている場合)、fontface プロパティを追加する必要はありませんfont-weight: bold;。フォントは既にボールドであり、フォントを追加しているためです。 -weight は偽の太字を追加し、見栄えを悪くします。

これは、通常の太字でないバージョンにしたい場合にh2のみ、 を配置する必要があることを意味します。font-family: Lato;

于 2013-02-15T09:52:56.837 に答える
-3

これは継承の問題である可能性があります。!important キーワードを入れてみましたか。

font-weight: normal !important;
于 2013-02-15T09:25:40.207 に答える