0

そこで、HTML/CSS を使用して単一のページ レイアウトを設計しました。このページは次の場所にあります。

http://letsrob.org/

したがって、ページのヘッダー テキストは、font-face プロパティを使用して読み込んだカスタム フォントです。chrome ではフォントサイズとフェイスは完璧ですが、firefox ではサイズが大きくなり、フォント自体が少し異なって見えることもあります。これはなぜですか？ヘッダーのフォントだけでページ全体が乱れます!

私のフォントフェイスコード:

@font-face {
    font-family: "logotext";
    src: url(http://letsrob.org/css/BEBAS.ttf) format("truetype");
}
@font-face {
    font-family: "captiontext";
    src: url(http://letsrob.org/css/Franchise-Bold-hinted.ttf) format("truetype");
}

私のヘッダーCSSクラス:

<div id="banner" style="margin-top:20px;color:white;font-weight:bold;font-size:1.75em;font-family:logotext;text-align:center;">Reclaim Our Beaches</div>

<div style="color:white;font-weight:bold;font-size:3em;font-family:captiontext;text-align:center;margin-top:20px;">ROB SYMPOSIUM: Talking trash, Exposing waste</div>

<div style="color:white;font-weight:bold;font-size:1.5em;font-family:captiontext;text-align:center;margin-top:20px;">10AM to 5PM, 18 & 19th AUGUST,2012</div>
<div style="color:white;font-weight:bold;font-size:1.5em;font-family:captiontext;text-align:center;margin-top:10px;">Conference Hall, School of Media Studies, Loyola College, Chennai</div>

中断を確認するには、firefox を使用してページにアクセスしてください。クロムで完全に正常に動作します！

前もって感謝します

4

1 に答える 1

2

フォントの唯一の太さが太字のようです。CSS で指定font-weight:boldしたため、Firefox は、グリフを展開して、既に太字の書体を自動太字にしようとしています。そのルールを削除すると修正されます (また、Mac の Chrome で見栄えが良くなります)。

于 2012-08-12T10:51:56.683 に答える