Question

我正在使用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>

上面的代码如下所示：

Descenders getting cut off http://thinkdrastic.net/journal/wp-content/uploads/2010/06/descenders.png

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

Answer 1

在@adamliptrot的帮助下，我发现Droid Sans的下降器在几个精确的像素尺寸上绝对精确：18,22和27px。我相应地调整了我的em：

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

不理想，但有效：

The descenders work! http://thinkdrastic.net/journal/wp-content/uploads/2010/06/fixed-descenders.png

Answer 2

虽然您的问题与Google网络字体API有关，但我的答案原则是相同的。

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

可能需要调整的值是WinAscent＆amp; WinDescent。

快速而肮脏的修复方法是将这两者都调整为0.

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

Answer 3

我已经检查了引用的ttf文件，甚至在windows字体查看器中，下载器也被剪切掉了。似乎更多的是服务字体而不是样式的问题。

Answer 4

如果您正在使用Font Squirrel，那么sans变体的问题似乎已被排序，但问题仍然存在于Font Squirrel的serif变体中。

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

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

这会以所有尺寸

正确呈现字体

Answer 5

我们遇到了同样的问题......我们尝试使用font squirrel。我们尝试使用谷歌网络字体。字体像g一样切断了“挂”字母。此外，谷歌托管版本并不像其他版本那样真实和清晰。字体看起来有点不稳定。

我们的解决方案：

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

Answer 6

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

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

不适用于您，然后将“line-height”添加到切断下延器的元素。 ``

Answer 7

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

Answer 8

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

h2 { line-height: 140%; }

使用CSS @ font-face时，为什么我的下降器会被切断？

8 个答案: