在Opera和webkit中切断了自定义字体的底部

Question

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

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

小写特别清楚g.

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

line-height而padding例如不改变任何东西,20px的font-size正常工作,并在目前我使用的是Windows 7.

编辑:顺便说一句,我知道这里有一个类似的问题,但由于接受的答案是改变字体大小而其余答案不适用,所以对我来说没什么用处.

编辑2: 至少现在显示问题的示例(左下栏,幻灯片下,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规范之后删除hash-tag (为什么还有？),导致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 64bit中,svg字体不像字体那么清晰woff,它有点模糊,所以我不会使用这个解决方案,我希望有更好的解决方案.

Answer 2

对于一个类似的问题,一个答案表明,虽然这似乎是Windows字体呈现问题,但托管svg,eot和otf版本的TrueType字体(TTF)包含未针对网络优化的字体,已修复它的提供者的问题.如果可能,请获取DroidSans字体的干净,未优化版本并自行导出Web字体.

编辑:对不起,我出去度假,没有访问权限.自从我回来以后,我已经对Windows机器上究竟是什么导致了这个问题进行了一些研究......

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

但是,您可以选择将哪些字体提供给查看者的浏览器.就个人而言,我建议首先在你的CSS中放置SVG版本,对于不能识别这种格式的浏览器,建议使用TrueType(TTF),然后是WOFF,然后是不支持上述任何一种浏览器的EOT(一些IE的旧版本看起来似乎支持OpenType).如果您不喜欢SVG渲染,请首先尝试TrueType.

或者,尽管我不再那么自信它会有所帮助,但您可以在FontSquirrel下载Troid的DroidSans,并使用像Typograf这样的软件包来导出Web字体(EOT,WOFF,SVG).不过,首先尝试重新排列CSS中的源代码.

另一个编辑:我错误地使用了TIFF而不是TTF,以便在将来避免混淆.为混淆道歉,伙计们......

Answer 3

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

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

将行高设置为正常，这是一个 Firefox 错误，并使用 % 中的行高我认为这可能会成功