可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm using the Google webfonts API to embed Droid Sans on a page. All is fine, except for the descenders (i.e. the dangly bits on y, g, etc). The latest versions of Firefox, IE and Chrome on my Windows Vista box are all cutting the bottom off.

<!DOCTYPE html>
<html>
<head>
 <title>Droid sans descender test</title>
 <meta charset="utf-8">
 <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
 <style type="text/css">
  body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
  h1, h2, h3 { margin: 1em 0; font-weight: normal; }
  h1 { font-size: 2em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1em; }
 </style>
</head>    
<body>
 <h1>A bug ran under the carpet anyway</h1>
 <h2>A bug ran under the carpet anyway</h2>
 <h3>A bug ran under the carpet anyway</h3>
</body>
</html>

The above code looks like this:

Descenders getting cut off http://thinkdrastic.net/journal/wp-content/uploads/2010/06/descenders.png

I've tried line-height, font-size, padding etc to no avail. I had some success with font-size-adjust, but the last time I checked it was Gecko only. Does anybody know of a fix for this?

回答1:

With some help from @adamliptrot, I discovered that Droid Sans' descenders are absolutely fine at a few precise pixel sizes: 18, 22 and 27px. I adjusted my em's accordingly:

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

Not ideal, but it works:

The descenders work! http://thinkdrastic.net/journal/wp-content/uploads/2010/06/fixed-descenders.png

回答2:

Although your question is in relation to the Google Web Fonts API, the principle of my answer beneath is the same.

If the descendants are being cut-off when serving a TrueType Font, the most likely cause is that OS/2 metrics are incorrectly set (negatively) on the font.

The values that may need adjustment are WinAscent & WinDescent.

A quick and dirty fix would be to adjust these both to 0.

This can be done using Font Forge. Once the font is opened in FontForge, you can gain access to these parameters via the 'Font Info' dialogue.

回答3:

I have checked the referenced ttf files, and even in windows font viewer the descenders are being cut. Seems more of an issue with the font being served rather than with your styles.

回答4:

If you're using Font Squirrel, it seems the issue with the sans variant has been sorted, but the issue remains with Font Squirrel's serif variant.

For a fix for the serif variant, go to the Web Font Generator and load the font files you need (do not rely on the package they provide).

Click the 'Expert' radio button, leave all of the settings but under 'Advanced Options' change the 'Em Square Value' to '2162' and generate the font.

This renders the font properly at all sizes

回答5:

we've been having the same problem...we tried using font squirrel. we tried using google web fonts. The font kept cutting off "hanging" letters like g. Also, the google hosted version did not appear as true and clear as the other ones. The font seemed a bit choppy.

Our solution:

We hosted the font ourselves without formatting it for the web. Then we converted the ttf file to an svg, .eot, and .otf, and uploaded those as our fixes for ie and mozilla etc.

回答6:

If the tip at the top - changing font-size to....

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

doesn't work for you, then add "line-height" to the element that is cutting off the descenders. ``

回答7:

I'm just guessing here, but I've had the same problem occur when fonts get substituted. I just wonder if this occurs when say a font substitution replaces a 1024em font with a 1000em font or vice-versa. I had some major descender cut-off using a 2048em font. Might be worth investigating.