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

看起来你字体中唯一的粗体是粗体。因为您font-weight:bold在 CSS 中指定 Firefox 正在尝试通过扩展字形来自动加粗已经粗体的字体。删除该规则可以修复它（并且在我的 Mac 上的 Chrome 中看起来也更好）。

于 2012-08-12T10:51:56.683 回答