“重叠”字符的字母间距问题答案

【问题标题】：Letter spacing issue with 'overlapping' character“重叠”字符的字母间距问题
【发布时间】：2012-09-13 06:31:12
【问题描述】：

我在使用 Google Web Fonts 上找到的字体时遇到了问题。

如下图所示，当我使用 Firefox 时，“Versus”中的大写 V 与“e”重叠。虽然当我使用 Chrome（或 IE）时，它不会重叠，并在两个字符之间留下难看的空间。

有没有什么办法可以解决这个问题，让它看起来像 Firefox 中的一样？还是我应该开始寻找另一种字体？

我的 HTML：

<html>
<head>
    <meta charset="utf-8">
    <title>Versus</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
</head>
<body>
    <div>
        <h1>Versus</h1>
    </div>
</body>

我的 CSS：

h1 {
font-family: 'Marck Script', cursive;
font-size: 100px;
color:#444;
text-align:center;
padding:0 50px;
text-shadow: 2px 2px 3px #777;

}

提前致谢！

【问题讨论】：

您是否让您的用户在访问您的网站时下载字体？如果是这样的话，那么它通常是不受欢迎的。如果您想冒险走这条路，我会发布答案。
这被称为“字距调整故障”。这可能是正在使用的字体版本。
同意@Ekaterina。制作网站时，避免使用访问者/客户不太可能安装的字体。并始终在您的 css 字体系列列表中提供默认值之一（衬线、无衬线、等宽，...）。
Ekaterina，我使用 google webfonts 为访问者提供字体。我添加了我的代码以进行额外说明。这是推荐的吗？
我发布了一个答案。标准的网络协议是不使用需要下载的字体，但最终它是你的网站，你可以随意使用它。

标签： css fonts cross-browser letter-spacing

【解决方案1】：

为了固定字体的间距，您应该使用：

letter-spacing: 10px /* How ever much you need */

在不了解 HTML 和 CSS 的细节的情况下，您可以使用以下方法修复问题区域：

风格

span { letter-spacing: -4px }

html

<span>V</span>ersus

这是 hokie，但它应该可以工作。

【讨论】：

甜蜜！这解决了它！谢谢！
修复让 Firefox 上的情况变得更糟
当然是因为它是针对 Chrome 和 IE 的修复程序。你需要把你的风格放在评论标签

【解决方案2】：

现在，当使用带有字距调整对的字体时，Firefox 支持字距调整。其他浏览器还没有赶上。有几个提议的 CSS 功能会影响字距调整，Firefox 对它们有一些支持，但其他浏览器不支持。

所以你应该寻找另一种字体。通过letter-spacing 或margin 属性手动调整间距既麻烦又冒险；你很容易在 Firefox 上搞砸了。

如果您继续使用 Marck Script 字体，最好将其下载并安装在您的服务器上并从那里使用。在 Google 服务器上使用时，许多 Google 字体存在问题。在这种情况下，标准模式下的 IE 9 不使用该字体；错误代码 CSS3117 出现在控制台中，因此谷歌设置显然有问题。

【讨论】：

感谢您的评论，这澄清了很多！