字体在chrome中水平堆叠〜约10％的页面加载量

Question

我在Chrome中大约10％的页面加载中遇到了这个恼人的视觉错误（所有资源都正确加载）。

该网站使用ASP.net，bootstrap构建，并使用“Neuzeit S LT W01 Book”字体。

任何想法可能导致它？

<div class="center-block block text-left">

    <h3>Welcome!</h3>
    <p>
        At Kidbrooke Advisory we are passionate about enabling organisations to analyse financial risk.
        The specific needs will of course vary from company to company; the requirements of a large insurance 
        company subject to recent EU regulations are markedly different from the ones of a small energy company.
    </p>
    <p>
        We at Kidbrooke Advisory excel at providing bespoke <a href="/WhatWeDo/">risk analysis solutions</a>, 
        tailored to the specific business needs of your organisation.
    </p>
    <p>
        Please <a href="/WhatWeDo/">read on</a> for more information about how we could help your 
        organisation better understand the financial risks you are facing.
    </p>
</div>

Answer 1

这是一个相当模糊的问题，但它绝对是一个浏览器错误。它发生在我几周前，我遇到了这个问题，详细讨论过：https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

问题是Chrome在加载字体后不会更新元素的宽度。它将页面呈现为使用默认字体。

没有人知道它为什么会发生。那个帖子是从2014年开始的，问题仍然发生在今天，但它只发生在我的一个网站上。我只能假设错误是由特定字体触发的。

有一个解决方案。这是一个黑客，但它的工作原理。

如果您隐藏身体并再次显示它，它将强制重排，这似乎可以解决问题。所以，如果你正在使用jQuery，这样的东西就可以解决问题（确保它在你的.ready()函数中）：

$('body').hide().show();