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

Question

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

如果我使用已经安装在电脑上的版本 (Journal)，所有都正常，如下面的屏幕截图所示： _{(来源: valeriobulla.it)} 然而，一旦我切换到@font-face版本，字母的跟踪(特别是T)就会不同，并且看起来破碎： _{(来源: valeriobulla.it)} 这是@font-face的代码(font squirrel下载的font-face kit)：

@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一切正常。强制使用JournalRegular（通过注释Journal）会破坏间距。

我是在本地开发的。已在以下环境中进行测试： Windows 7 PC（已安装字体）：Firefox 7，Chrome，Opera，IE9。 Macbook（未安装字体）：Firefox，Safari。

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

- Valerio Bulla

---

尝试一次只使用一个src URL，以查看问题是否仅在其中一种替代格式中显现？可能是浏览器使用的格式不能很好地处理水平重叠的轮廓线，而选择了该格式。 - millimoose

你要找的术语是“字距调整”，我同意Inerdia的看法，一些格式可能不支持它。 - Mark Ransom

我尝试过了，但是没有成功。谢谢你的评论！@Mark 谢谢你的澄清，我是意大利人，有时在使用英语技术术语时会有些混淆 ;) - Valerio Bulla

Answer 1

我曾经在Font Squirrel上转换字体时遇到过类似的问题。其中一次，回到生成器并在专家选项中尝试了"移除字距"这一选项后，问题解决了。

- moraleida

---

好的，看起来这确实是一个答案！我之前下载了一个预生成的字体包。现在我知道我可以从生成器中自定义选项。非常感谢！ - Valerio Bulla

太棒了！很高兴能帮忙！ :) - moraleida

Answer 2

如果你遇到这个问题，无法编辑字体，请查看我的项目：

Jerning.com

在这种情况下，您将能够进行以下操作：

$('#assignment-text').jerning({
    "Te": -0.1,
    "Th": -0.1
});

这里有一个例子：

$('.with-jerning').jerning("Wo", -0.1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://jerning.com/js/jquery.jerning.min.js"></script>

<h2 class="without-jerning">Hello World</h2>

<h2 class="with-jerning">Hello World</h2>

- dav_i