使用字体时的随机字母间距答案

【问题标题】：Random letter spacing when using font-face使用字体时的随机字母间距
【发布时间】：2012-11-29 15:19:15
【问题描述】：

我正在使用这样的 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 未处于兼容模式）。看“Start”这个词，S和t很紧。然后单词“What”在W和h之间有太多的空间。在右侧，“Awarded”这个词看起来也与下一张图片大不相同。右边的日期看起来太糟糕了，我什至不认为会有一个 CSS 设置可以让你这样做——它会被称为什么？ make-my-page-awful: true;

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

【问题讨论】：

字体从何而来？是否仅对某些字母组合发生这种情况？即使有了这些问题的答案，如果没有示例页面，问题也很难解决。 Windows 设置可能很重要（我主要考虑字体平滑）。
我无法在此处发布链接，因为该站点尚未公开，即使如此，我们也可能不想要此处的链接。我会看看我是否可以在另一台服务器上放一些东西来复制这个问题。我也会看看我是否可以包含一个屏幕截图以使其更明显。

标签： css cross-browser font-face webfonts

【解决方案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）进行一些初始布局计算，然后尝试调整（以一种糟糕的方式）。我会假设如果它是第一个页面加载，但那不是它发生的时候。在那之后的某个几乎随机的时间发生。在我应用修复之前，我每次都能通过这些步骤重新创建：

打开主页——此时字体看起来不错，可能比应有的略小。
单击主页上的链接，该链接仅重新加载同一页面（如果我使用 F5 刷新则不会发生）。

--在这一点上，字体看起来很糟糕，就像我上面的例子

再次点击相同的链接

--此时字体看起来很完美

我可以关闭并重新打开浏览器，或者直接按 F5，然后一遍又一遍地重复上述步骤，每次都得到相同的结果。

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

【讨论】：