我在我正在开发的页面中使用自定义字体 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 的屏幕截图,以表明问题并非特定于我正在开发的网站。
最佳答案
虽然这不是我正在寻找的解决方案,但我找到了一个可能适用于其他人的可能解决方案:
在我原来的样式表中,我指定了如下字体:
@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
字体清晰,有点模糊,所以我不会使用此解决方案并希望有一个更好的。
关于css - Opera 和 webkit 中自定义字体的底部被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8576807/