自定义字体的底部在Opera和webkit中切断 [英] Bottom of custom font cut off in Opera and webkit

问题描述

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

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

小写字母 g 。

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

line-height 和 padding 't改变任何东西，20px font-size 工作正常，目前我使用Windows 7。

strong>编辑：顺便说一下，我知道一个类似的问题在这里，但作为接受的答案是改变字体大小，其余的答案不适用，它对我没有太多的用途。

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

编辑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'）格式（'woff'），
 url（'droid-sans / DroidSans-webfont.ttf'）格式（'truetype'），
 url droid-sans / DroidSans-webfont.svg＃DroidSans'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
} 
  

这导致webkit浏览器使用 woff file / format。

更改字体规格的顺序，并删除 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'）格式（'svg'），
 url（'droid-sans / DroidSans-webfont.woff'）格式（'woff'），
 url droid-sans / DroidSans-webfont.ttf'）format（'truetype'）; 
 font-weight：normal; 
 font-style：normal; 
} 
  

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

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

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.

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

It's especially clear for the lower case g.

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 and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.

Edit: 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.

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

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

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

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

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.

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.

这篇关于自定义字体的底部在Opera和webkit中切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！