为什么使用CSS @ font-face时我的下降沿被切断？ [英] Why are my descenders being cut off when using CSS @font-face?
问题描述
我使用Google网络字体API在网页上嵌入Droid Sans。一切都很好，除了下降器（即y，g等上的dangly位）。
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>
上述代码如下所示：
我试过了 line-height ， font-size ， padding 等无效。我有一些成功与 font-size-adjust ，但上次我检查它是Gecko只。有人知道这个修复吗？
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?
推荐答案
借助 @adamliptrot ，我发现Droid Sans的后代在几个精确的像素大小：18,22和27px是绝对精致。我相应地调整了em：
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:
这篇关于为什么使用CSS @ font-face时我的下降沿被切断？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
