为什么在使用 CSS @font-face 时我的后代会被切断？答案

【问题标题】：Why are my descenders being cut off when using CSS @font-face?为什么在使用 CSS @font-face 时我的后代会被切断？
【发布时间】：2010-06-03 14:45:34
【问题描述】：

我正在使用 Google webfonts API 在页面上嵌入 Droid Sans。一切都很好，除了下降器（即 y、g 等上的 dangly 位）。我的 Windows Vista 机器上的最新版本的 Firefox、IE 和 Chrome 都在减少。

<!DOCTYPE html>
<html>
<head>
 <title>Droid sans descender test</title>
 <meta charset="utf-8">
 <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
 <style type="text/css">
  body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
  h1, h2, h3 { margin: 1em 0; font-weight: normal; }
  h1 { font-size: 2em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1em; }
 </style>
</head>    
<body>
 <h1>A bug ran under the carpet anyway</h1>
 <h2>A bug ran under the carpet anyway</h2>
 <h3>A bug ran under the carpet anyway</h3>
</body>
</html>

上面的代码是这样的：

_{（来源：thinkdrastic.net）}

我试过line-height、font-size、padding 等都无济于事。我在font-size-adjust 上取得了一些成功，但我最后一次检查它只是 Gecko。有人知道解决这个问题吗？

【问题讨论】：

在 MacOS WebKit 上运行良好。你试过给更大的利润吗？
是的。我怀疑这将是那些“这就是 Windows 的工作方式”问题之一。
这可能只是复制粘贴错误，但font-family: "Droid Sans"sans-serif; 需要逗号。
@kevingessner 很好。为了简单起见，我删除了所有后备字体，但删除了太多:)

标签： css font-face

【解决方案1】：

在@adamliptrot 的帮助下，我发现 Droid Sans 的下降器在几个精确的像素大小上绝对没问题：18、22 和 27 像素。我相应地调整了我的 em：

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

不理想，但有效：

_{（来源：thinkdrastic.net）}

【讨论】：

这可能意味着在任何类型的缩放或非标准分辨率显示器上都会再次失败。
它似乎在各种缩放级别下都可以正常工作。鉴于这只是一个仅在 Windows 上发生的轻微视觉故障，在这种情况下，它是一个具有相当同质硬件设置的内部网，我并不太担心。当然要注意一些事情:)
字体“Walkway”也有同样的问题，而神奇的 1.6875em 数字也适用于此...奇怪的系统故障

【解决方案2】：

虽然你的问题是关于 Google Web Fonts API，但我下面的回答原理是一样的。

如果在提供 TrueType 字体时后代被截断，最可能的原因是 OS/2 指标在字体上设置不正确（负面）。

可能需要调整的值是 WinAscent 和 WinDescent。

一个快速而肮脏的解决方法是将这两个都调整为 0。

这可以使用Font Forge 来完成。在 FontForge 中打开字体后，您可以通过“Font Info”对话框访问这些参数。

【讨论】：

这似乎对我不起作用。我在 fontforge 中成功更改了这些指标，但问题仍然存在。
你能把字体发给我吗，我看看为什么这不起作用。
这只是帮助我找到了我使用 MyScriptFont.com 创建的字体的问题。 OS/2 指标设置为错误值。谢谢。

【解决方案3】：

我已经检查了引用的 ttf 文件，甚至在 Windows 字体查看器中，下降的部分也被剪切了。似乎更多的是所提供的字体而不是您的样式的问题。

【讨论】：

他们这样做了。我想知道这是字体的问题还是 Windows 字体渲染的问题？

【解决方案4】：

如果您使用的是 Font Squirrel，似乎 sans 变体的问题已经解决，但问题仍然存在于 Font Squirrel 的 serif 变体。

要修复衬线变体，请转到 Web 字体生成器并加载您需要的字体文件（不要依赖它们提供的包）。

单击“专家”单选按钮，保留所有设置，但在“高级选项”下将“Em Square Value”更改为“2162”并生成字体。

这会以所有尺寸正确呈现字体

【讨论】：

这并没有为我解决。我在 14.8-15.2 px (IE) / 15.0 - 15.1 px (Chrome, Firefox) 使用 Open Sans 时遇到了问题。即使将 em 平方值从 2048 设置为 2162，该问题仍然存在。也许尝试更大的值可能会奏效，但我想我会选择避开问题范围。

【解决方案5】：

我们遇到了同样的问题...我们尝试使用字体松鼠。我们尝试使用谷歌网络字体。字体不断切断像g这样的“悬挂”字母。此外，谷歌托管的版本并不像其他版本那样真实和清晰。字体似乎有点波涛汹涌。

我们的解决方案：

我们自己托管了字体，没有为网络格式化。然后我们将 ttf 文件转换为 svg、.eot 和 .otf，并将它们上传为我们对 ie 和 mozilla 等的修复。

【讨论】：

【解决方案6】：

如果顶部的提示 - 将字体大小更改为....

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

对你不起作用，然后将“line-height”添加到切断下降线的元素。 ``

【讨论】：

有趣。 line-height 根本不适合我，但某些像素大小可以。如果您的基本字体大小不同，那些em 大小可能不太适合您。

【解决方案7】：

我只是在这里猜测，但是当字体被替换时，我也遇到了同样的问题。我只是想知道当字体替换用 1000em 字体替换 1024em 字体时是否会发生这种情况，反之亦然。我使用 2048em 字体进行了一些主要的下降。可能值得研究。

【讨论】：

【解决方案8】：

我遇到了类似的困境，行高修复对我有用（即我将此代码添加到自定义 CSS 部分）：

h2 { line-height: 140%; }

【讨论】：