Question

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

如果我使用我的电脑（期刊）中安装的版本，您可以从以下屏幕截图中看到一切：

http://www.valeriobulla.it/normal.jpg

然而，一旦我切换到@ font-face版本，字母'跟踪（特别是Ts）就不同了，看起来很破碎：

http://www.valeriobulla.it/error.jpg

这是@ font-face的代码（从font squirrel下载的font-face工具包）：

@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;
}

使用期刊在我的电脑上一切正常。强制JournalRegular（通过评论期刊）打破间距。我在当地发展。测试中： Windows 7 PC（安装了字体）：Firefox 7，Chrome，Opera，IE9。 Macbook（未安装字体）：Firefox，Safari。

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

Answer 1

我在font-squirrel上转换的字体遇到了类似的问题。其中一次，回到发电机并玩专家选项，特别是“删除Kerning”解决了它。

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>

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

2 个答案: