使用font-face时的随机字母间距

Question

我正在使用这样的CSS：

@font-face {
    font-family: Chocolat;
    src: url('../fonts/chocolat.eot');
    src: url('../fonts/chocolat.eot?#iefix') format('embedded-opentype'),
         url('../fonts/chocolat.woff') format('woff'),
         url('../fonts/chocolat.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

在IE7，IE8，IE9以及最新版本的FireFox和Chrome中，该页面大部分时间都是正确的。页面加载每隔几次，页面的一些或全部将具有每个字母之间的间距关闭的区域。有时2个字母挤在一起，然后接下来的2个字母有很多额外的空间（几个像素，但显而易见和丑陋）。我不是肯定的，但我认为它只发生在IE8中，可能在兼容模式下也没有。现在快速检查很难随意。

我无法打开其他格式，但是当我在Windows中打开TTF格式时，它在标题区域中显示“OpenType”，但在详细信息中显示“OpenType Layout，TrueType Outlines”。我对创建字体知之甚少，我只是从艺术家那里得到了这个，然后使用fontsquirrel.com来创建其他字体。

另一个开发者推荐letter-spacing，但这似乎只有在事情看起来不错的时候才会有所帮助，而不是在这种随机字母间隔模式下。

编辑：添加照片

只需点击网站，有时页面加载看起来像这样（这是IE8不兼容模式）。看看“开始”这个词，S和t非常紧张。那么“什么”这个词在W和h之间有太多的空间。在右侧，“获奖”一词也与下一张图片看起来非常不同。右侧的日期看起来很糟糕我甚至不认为会有一个CSS设置让你这样做 - 它会被称为什么？ make-my-page-awful：true;

我所做的就是按F5重新加载页面，看起来不错：

Answer 1

更改此内容：

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

到此：

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat;
    color: #000000;
}

所以只是字体：行，似乎解决了这个问题。

我猜IE8必须使用其中一种后备字体（可能是Arial）进行一些初始布局计算，然后尝试调整（以糟糕的方式）。我会假设，如果它是第一页加载，但不是它发生时。它发生在几乎随机的时间之后。在应用修复之前，我能够使用这些步骤重新创建：

1. 打开主页 - 此时字体看起来很不错，可能比它们应该略小。

2. 点击刚重新加载同一页面的主页上的链接（如果我使用F5刷新则没有发生）。

- 此时，字体看起来非常糟糕，就像上面的例子

1. 再次点击相同链接

- 此时字体看起来很完美

我可以关闭并重新打开浏览器，或者只需点击F5，然后反复重复上述步骤，每次都会得到相同的结果。

更改了CSS中的一行，现在无法重新创建。