Question

我在我正在开发的页面中使用自定义字体，Droid Sans以及某些字体大小，底部被截断，但仅限于Opera和webkit浏览器。

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

小写g特别清楚。

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

例如，

line-height和padding不会更改任何内容，而且20px font-size正常工作，目前我使用的是Windows 7。

编辑顺便说一句，我知道这里有一个similar question，但由于接受的答案是更改字体大小而其余答案不适用，因此对我没什么用处。

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

编辑3：问题似乎仅限于Windows，但我不确定哪个版本。

编辑4：我添加了一个来自Google Webfonts的屏幕截图，以表明问题并非针对我正在开发的网站。

Chrome 16, Google Webfonts

Answer 1

虽然这不是我想要的解决方案，但我找到了一个可能对其他人有效的解决方案：

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

@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 64bit中，svg字体不像woff字体那么清晰，它有点模糊，所以我不会使用这个解决方案，我希望更好之一。

Answer 2

对于similar question，一个答案表明，虽然这似乎是一个Windows字体呈现问题，但是托管svg，eot和otf版本的TrueType字体（TTF）包含字体，这是未针对网络进行优化，修复了其提供商的问题。如果可能，请获取DroidSans字体的干净，未优化版本并自行导出Web字体。

编辑：对不起，我出去度假，没有SO。自从我回来以后，我已经对Windows机器上究竟是什么导致了这个问题进行了一些研究......

似乎问题在于Windows机器上呈现OpenType格式的方式。截断的下行程序的问题似乎超越了软件类型，以影响尝试呈现OpenType的多个Windows程序。目前，您在@font-face下的CSS文档中首先列出了嵌入式OpenType格式（EOT）版本的字体。由于Chrome和Opera都识别这种格式，因此他们将忽略后续的源声明，并使用EOT显示字体。不幸的是，似乎没有一个快速解决方案可以应用于OpenType字体本身来强制软件渲染它以允许Windows机器上最低的下行器有足够的行距...

但是，您可以选择将哪些字体提供给观看者的浏览器。就个人而言，我建议将 SVG版本首先放在你的CSS中，对于那些不能识别这种格式的浏览器，建议选择TrueType（TTF），然后选择WOFF，然后选择不支持浏览器的EOT支持上述任何一个（IE的某些旧版本似乎是冲动地支持OpenType）。如果您不喜欢SVG渲染，请首先尝试使用TrueType。

或者，虽然我不再那么自信它会有所帮助，但您可以在FontSquirrel下载DroidSans的TTF并使用Typograf等软件包导出网络字体（EOT， WOFF，SVG）。不过，请先尝试重新排列CSS中的来源，如上所述。

另一个编辑：我对错误使用TIFF而不是TTF进行了编辑，以避免将来出现混淆。混淆道歉，伙计......

Answer 3

我不确定但是尝试将其添加到填充工作

display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;

将行高设置为正常，这是一个firefox错误，并以％为单位使用行高我认为这可能会成功

Answer 4

这一切归结为字体本身。

看这里
http://jsfiddle.net/DdMej/2/

第一行使用Google字体的Drod Sans。第二行使用您网站上的字体。

编辑1
截图
http://imageshack.us/photo/my-images/811/screeniy.png/
enter image description here

Answer 5

我也看到了我的Google字体＆＃39; Lato＆＃39;切断渲染文本的底部。就我而言，我需要在本地提供字体文件，而不是使用谷歌字体。要做到这一点我：

使用Font2Web
将本地字体文件作为localhost
我的css中包含bulletproof @font-face implementation

这消除了我的剪切渲染文本问题。

在Opera和webkit中切断了自定义字体的底部

5 个答案: