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

Question

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

很容易在 Google 自己的网络字体页面上重现，寻找 Droid Sans 并以 18 像素显示整个字母表: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

虽然这不是我正在寻找的解决方案，但我找到了一个可能适用于其他人的可能解决方案:

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

@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 字体清晰，有点模糊，所以我不会使用此解决方案并希望有一个更好的。