Opera 和 webkit 中自定义字体的底部被截断

Question

我正在开发的页面中使用自定义字体，Droid Sans，并且在某些字体大小下，底部被切断，但仅在 Opera 和 webkit 浏览器中。

很容易在 Google 自己的 webfonts 页面上重现寻找 Droid Sans 并以 18px 显示整个字母表：http://www.google.com/webfonts

小写的g尤其明显。

是否有一些 css 技巧/hack 我可以用来增加行高/显示整个字符，还是我真的仅限于某些字体大小？

line-height 和 padding 例如不要更改任何内容，20px font-size 工作正常，目前我使用的是 Windows 7。

编辑：顺便说一句，我知道这里有一个similar question，但由于接受的答案是改变字体大小，而其他答案不适用，它并不多给我用。

编辑 2： An example 至少现在显示了问题（左栏，幻灯片下方，Il Cerca Viaggi）。

编辑 3：问题似乎仅限于 Windows，尽管我不确定哪些版本。

编辑 4：我添加了来自 Google Webfonts 的屏幕截图，以表明该问题并非特定于我正在开发的网站。

Answer 1

我也看到我的 Google 字体“Lato”在渲染文本的底部被截断。就我而言，我需要在本地提供字体文件，而不是使用 Google 字体。为此，我：

• 将字体从 .ttf 转换为带有 Font2Web 的 webfont 文件
• 将字体文件作为来自本地主机的静态文件资产在本地提供
• 在我的 css 中包含bulletproof @font-face implementation 的字体

这消除了我截断的渲染文本问题。

Answer 2

虽然这不是我正在寻找的解决方案，但我找到了可能对其他人有用的解决方案：

在我原来的样式表中，我指定了如下字体：

@font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
         url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

这导致 webkit 浏览器使用 woff 文件/格式。

更改字体规范的顺序并删除 svg 规范之后的井号标签（为什么仍然存在？），导致 webkit 浏览器使用 svg 文件/格式：

@font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.svg') format('svg'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

这样就解决了问题，所有字符都正确显示了。

但是，至少在 Windows 7 64 位中，svg 字体不如woff 字体清晰，有点模糊，所以我不会使用这个解决方案，希望有更好的解决方案。

Answer 3

对于similar question，一个答案表明，虽然这似乎是一个 Windows 字体渲染问题，但托管包含该字体的 TrueType 字体 (TTF) 的 svg、eot 和 otf 版本，不是针对网络进行了优化，已为其提供商解决了该问题。如果可能，获取一个干净的、未优化的 DroidSans 字体版本并自己导出网络字体。

编辑：对不起，我出去度假，无法访问 SO。自从我回来后，我已经对 Windows 机器上导致此问题的确切原因进行了一些研究...

问题似乎在于 OpenType 格式在 Windows 机器上的呈现方式。截断后裔的问题似乎超越了软件类型，影响了多个尝试呈现 OpenType 的 Windows 程序。目前，您在@font-face 下的 CSS 文档中首先列出了该字体的嵌入式 OpenType 格式 (EOT) 版本。由于 Chrome 和 Opera 都可以识别这种格式，它们将忽略后续的源声明并使用 EOT 来显示字体。不幸的是，似乎没有一个快速修复方法可以应用到 OpenType 字体本身，以强制渲染它的软件在 Windows 机器上为其最低的后代提供足够的行距...

但是，您可以选择提供给观众浏览器的字体。就个人而言，我建议将 SVG 版本 放在你的 CSS 中，对于不能识别这种格式的浏览器，建议第二个是 TrueType (TTF)，然后是 WOFF，然后是 EOT支持上述任何一种（一些旧版本的 IE 似乎完全支持 OpenType）。如果您不喜欢 SVG 渲染，请先尝试 TrueType。

或者，虽然我不再那么确信它会有所帮助，但您可以在 FontSquirrel 下载 DroidSans 的 TTF，并使用像 Typograf 这样的软件包来导出网络字体（EOT、WOFF、SVG） .不过，请先尝试按照上述说明重新排列 CSS 中的源代码。

另一个编辑：我对 TIFF 而不是 TTF 的错误使用已被编辑，以避免将来混淆。对不起，伙计们......

Answer 4

这一切都归结为字体本身。

看这里
http://jsfiddle.net/DdMej/2/

第一行使用 Drod Sans by Google 字体。 第二行使用您网站上的字体。

---

编辑 1
截图
http://imageshack.us/photo/my-images/811/screeniy.png/

Answer 5

我不确定，但尝试添加它以使填充起作用

display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;

将行高设置为正常，这是firefox的一个bug，使用%的行高 我认为这可能会解决问题