html - @font-face 和错误的字母跟踪/间距

Question

我在构建网站时遇到了使用@font-face 的问题。字体安装在我的电脑上，我是从 fontsquirrel.com 下载的。

如果我使用安装在我的 PC 中的版本(Journal)，一切正常，您可以从以下屏幕截图中看到:

_{(来源:valeriobulla.it)}

但是，一旦我切换到@font-face 版本，字母的跟踪(特别是 Ts)就不同了，看起来很破:

_{(来源:valeriobulla.it)}

这是@font-face(从 font squirrel 下载的字体套件)的代码:

@font-face {
font-family: 'JournalRegular';
src: url('journal-webfont.eot');
src: url('journal-webfont.eot?#iefix') format('embedded-opentype'),
     url('journal-webfont.woff') format('woff'),
     url('journal-webfont.ttf') format('truetype'),
     url('journal-webfont.svg#JournalRegular') format('svg');
font-weight: normal;
font-style: normal;
}

这是元素(一个 div)样式:

#assignment-text {
font-family: Journal, JournalRegular, serif;
font-size: 3em;
text-align: center;
width: 340px;
position: absolute;
top: 200px;
left: 320px;
color: #000;
}

使用 Journal 在我的 PC 上一切正常。强制 JournalRegular(通过评论 Journal)打破间距。我在本地开发。测试于:Windows 7 PC(安装了字体):Firefox 7、Chrome、Opera、IE9。Macbook(未安装字体):Firefox、Safari。

这是一个已知问题吗？我进行了搜索，但似乎找不到解决方案。

Answer 1

我在 font-squirrel 上转换的字体也遇到过类似的问题。有一次，回到生成器并使用专家选项，特别是“删除字距调整”解决了它。