所以,我使用HTML / CSS设计了单页面布局。该页面可在此处找到:
因此,页面的标题文本是我使用font-face属性加载的自定义字体。 font-size和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访问该页面以查看中断情况。它在chrome上工作得非常好!
提前致谢
答案 0 :(得分:2)
看起来你字体中唯一的重量是粗体。因为您在CSS中指定了font-weight:bold
,Firefox会尝试通过扩展字形来自动加粗已经粗体的字体。删除该规则会修复它(在Mac上的Chrome中看起来也更好)。