html - Chrome 和 Safari 突然在完全错误的位置显示我的网络字体 <h1>

Question

我已经搜索了论坛，但我得到的唯一答案是关于字体看起来粗体或有锯齿状边缘的问题。

从今天开始，我的 h1 @font-face 字体显示在 Chrome 和 Safari 页面的底部。我不知道为什么。之前还好。

一个很好的页面示例是 https://www.beatnikbreaks.com/about-us/ - 在 Chrome 中查看，然后在 Firefox 中查看。 Firefox 将其显示在顶部。

Chrome 首先在顶部加载它，然后突然跳到底部。

我的字体 CSS 是:

#pagecontent h1{

margin-top: 0px;
color: #b9b9b9;
font-family: 'lucky_typewriterregular',Times,serif;
font-size: 40px;
font-weight: normal;
line-height: 44px;
letter-spacing: 1px;
margin-left: 0px;
float: left;
text-align: left;
width: 1000px;
} 

HTML 是:

<div id="pagecontent">

<p></p>
<h1>About Beatnik Breaks</h1>

<h2>About Beatnik Breaks - Large luxury holiday short term rental in Brighton, ideal for holiday letting and stag &amp; hen party accommodation</h2>

<p></p>

<p>We're a little bit shy... some details about us will follow. Or if there's something specific you want to know, then give us a call or <a class="highlight" href="contact-us">email us</a>...
</p>

<p></p>


</div>

我最近确实更新了我的 Wordpress，但我不明白为什么会突然这样做。

任何帮助将不胜感激

提前致谢

Answer 1

我认为 float 可能是一个问题，尝试在 pagecontent(h1 的实际容器)添加 float

#pagecontent{
  float:left;
}