Question

我在Google Web Fonts找到的字体有问题。

正如您在下面发布的图片中所看到的，当我使用Firefox时，'Versus'中的大写字母V与'e'重叠。虽然当我使用Chrome（或IE）时它并没有重叠，但在两个角色之间留下了一个丑陋的空间。

有没有办法解决这个问题，让它看起来像Firefox中的那个？或者我应该开始寻找另一种字体吗？

Chrome/IE & Firefox Comparison

我的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;

}

提前致谢！

Answer 1

为了修复字体中的间距，您应该使用：

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

在不知道HTML和CSS已有的具体细节的情况下，您可以使用以下内容修复问题区域：

式

span { letter-spacing: -4px }

HTML

<span>V</span>ersus

这是新手，但应该有用。

Answer 2

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

所以你应该寻找另一种字体。手动调整letter-spacing或margin属性的间距很麻烦且风险很大;你很容易就会在Firefox上破坏它。

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

带有“重叠”字符的字母间距问题

2 个答案: