0

我正在使用这样的 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 设置可以让你这样做——它会被称为什么？使我的页面糟糕：真；

错误的字母间距

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

良好的字母间距

4

1 回答 1

2

改变这个：

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 中的一行，现在无法重新创建。

于 2012-12-12T17:11:58.223 回答