18

我正在使用 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。有人知道解决这个问题吗？

4

8 回答 8

12

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

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

不理想，但它有效：

下属工作！
（来源：thinkdrastic.net）

于 2010-06-03T16:35:07.123 回答
5

虽然您的问题与 Google Web Fonts API 有关，但我在下面回答的原则是相同的。

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

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

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

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

于 2012-05-10T13:41:08.810 回答
3

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

于 2010-06-03T14:52:12.080 回答
3

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

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

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

这可以在所有尺寸下正确呈现字体

于 2013-04-12T16:29:11.790 回答
1

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

我们的解决方案：

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

于 2011-12-16T06:27:07.620 回答
0

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

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

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

于 2012-05-31T14:19:58.907 回答
0

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

于 2016-02-20T02:02:14.990 回答
-2

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

h2 { line-height: 140%; }
于 2014-12-23T22:32:17.893 回答