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

2022-01-18 00:00:00 webkit windows-7 css opera custom-font

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

I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.

很容易在 Google 自己的网络字体页面上重现 Droid Sans 并以 18 像素显示整个字母表:http://www.google.com/webfonts

It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts

对于小写的g尤为明显.

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

Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?

line-height 和 padding 例如不改变任何东西，20px font-size 工作正常，目前我正在使用视窗 7.

line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.

顺便说一句，我知道一个 类似问题在这里，但由于接受的答案正在改变字体大小，其余答案不适用，它对我没有多大用处.

By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.

编辑 2: 一个例子 至少现在显示问题(左侧列，幻灯片下方，Il Cerca Viaggi).

Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).

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

Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.

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

Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.

推荐答案

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

Although it is not the solution I am looking for, I have found a possible solution that might work for others:

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

In my original style-sheet I have specified the font as follows:

@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 文件/格式.

This is causing webkit browsers to use the woff file / format.

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

Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:

@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;
}

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

This solves the problem, all characters are displayed correctly.

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

However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.

相关文章