logo标签列表

自定义字体在Opera和Webkit中底部被截断

csswindows-7webkitoperacustom-font
12

我在开发一个网页时使用了自定义字体Droid Sans，在某些字号下，底部被切断，但只在Opera和Webkit浏览器中出现。

在Google自己的webfonts页面上查找Droid Sans并以18px显示整个字母表，易于复现：http://www.google.com/webfonts

特别是小写字母g更明显。

有没有一些CSS技巧/黑科技可以增加行高/显示整个字符，或者我真的只能使用特定大小的字体？

line-height和padding等并不能改变任何东西，20pxfont-size正常工作，目前我正在使用Windows 7。

编辑：顺便说一句，我知道这里有一个类似的问题，但由于被接受的答案是改变字体大小，其余答案并不适用，对我帮助不大。

编辑2： 示例目前至少显示了问题（幻灯片下面的左侧栏，Il Cerca Viaggi）。

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

编辑4： 我已经添加了来自Google Webfonts的屏幕截图，以显示该问题不特定于我正在开发的网站。

Chrome 16, Google Webfonts

你能发布该字体的样式吗？我正在查看谷歌网络字体，它们在我的Chrome和Safari中正常加载。 - Rob
在Vista上使用Chrome看起来不错。也许可以尝试使用-webkit-font-smoothing属性来改善字体渲染效果？ - ptriek
@ptriek 谢谢，但这似乎与文章中显示的任何值都没有关系。至少在我的页面上… - jeroen
在 OS X 上的 Opera 和 Webkit 看起来很好，因此它一定是 Windows 特定的问题。 - ThinkingStiff
@ThinkingStiff 谢谢，我已经在Ubuntu上用Chrome打开了这个页面，一切正常，确实是一个Windows的问题。 - jeroen
我刚在 Windows 上使用 Chrome 16 查看了它，对我来说很好。 - Abhranil Das
5个回答
11
虽然这不是我寻找的解决方案，但我找到了一个可能适用于其他人的解决方案：
在我的原始样式表中，我将字体指定为如下：
@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 64位系统上，svg字体不如woff字体清晰，有点模糊，所以我不会使用这个解决方案，并希望有更好的解决方案。

这个方案可行，虽然有点模糊，但在找到更好的解决方案之前是一个不错的选择。 - foxybagga
如果我没记错的话，只需要这样做：src: url(path/to/eot?), url(path/to/ttf);。将字体包含在另一种格式SVG中，甚至是另一种格式WOFF（可能只是压缩的TTF），以及所有这些不必要的格式声明（文件扩展名对浏览器甚至没有意义）的原因超出了我的理解。 - reisio
@reisio 它的作用是确保所有浏览器和停留在以前版本上的人都可以看到字体，正如您所看到的，我只能使用svg变体在webkit / Windows 7上显示所有字符。就个人而言，我宁愿使用Verdana，因为所有问题，调整大小和闪烁并没有真正说服我... - jeroen
我不知道它是否应该这样做，但它绝对不是它实际上所做的。http://is.gd/41fYRm 如果您想支持旧版本的Internet Explorer，则必须包括EOT；然后您在其他浏览器中的选择是WOFF（压缩TTF），普通TTF或SVG（尚未在Ff / IE中实现）。如果Ff / IE支持SVG，则您只需要包含三个其他格式中的一个（WOFF，TTF，SVG），而不是所有三个。包含其他三种格式什么都得不到，只会增加不必要的复杂性 - 选择您喜欢的（现在是WOFF和TTF）并使用它，跳过其余部分。 - reisio
这对我来说解决了在Chrome中为Twitter Bootstrap修复FontAwesome的问题。谢谢！ - Chris Clower
font-weight: normal; 解决了我的问题。 - Mikeumus
7

有一个类似的问题，其中一个答案建议，尽管这似乎是一个特定的Windows字体渲染问题，但托管包含字体的svg、eot和otf版本的TrueType字体（TTF），这些字体未经过网络优化，已经为其提供者解决了问题。如果可能的话，请获取干净的、未经过优化的DroidSans字体版本并自行导出Web字体。

编辑：很抱歉，我放假期间没有访问SO。自从我回来后，我对在Windows机器上导致这个问题的原因进行了一些研究...

似乎问题出在OpenType格式在Windows机器上的渲染方式上。截断下行线的问题似乎超越了软件类型，影响多个试图呈现OpenType的Windows程序。目前，在@font-face下，您的CSS文档中首先列出了字体的嵌入式OpenType格式（EOT）版本。由于Chrome和Opera都识别此格式，它们将忽略后续的源声明并使用EOT来显示字体。不幸的是，似乎没有一个快速的解决方案可以应用于OpenType字体本身，以强制软件在Windows机器上呈现时允许其下行线的适当行距。 然而，您可以选择向观众的浏览器提供哪些字体。个人建议在CSS中首先放置SVG版本，并为不识别此格式的浏览器建议第二个TrueType（TTF），然后是WOFF，对于不支持任何前述格式的浏览器使用EOT（一些旧版本的IE似乎仅支持OpenType）。如果SVG呈现不太符合您的口味，请尝试首先使用TrueType。

或者，虽然我不再那么自信它会有所帮助，但你可以在FontSquirrel下载DroidSans的TTF，并使用像Typograf这样的软件包导出Web字体（EOT，WOFF，SVG）。不过，请先按照上面概述的方法重新排列CSS中的资源。

另一个编辑：为避免将来混淆，我已经更正了使用TIFF而不是TTF的错误。对于混淆的抱歉...

抱歉回复晚了，@jeroen。请查看我上面编辑过的答案。 - Aaron
哦，糟糕，我以为TTF文件和ZIP压缩包一起提供。让我继续找一下。与此同时，您是否尝试先在CSS中设置TrueType版本？ - Aaron
至少在Chrome中，将ttf放在前面或完全删除它都没有任何区别。 - jeroen
我非常确定是OpenType字体(.EOF)导致了你的问题。在更新CSS文件后，你是否清除了浏览器缓存？ - Aaron
好的，我要坦白一件事。过去当我提到TIFF文件作为字体存储格式时，我非常错误并且对自己的无知感到相当尴尬。我不确定是什么导致我将TIFF与字体联系起来，也许TIF与TTF的相似性在我的大脑中引发了某种突触短路。对于造成的混淆我感到抱歉，TrueType（TTF）似乎是您应该导出Web字体的格式。我正在编辑我的答案以避免进一步的混淆，只希望我没有误导任何人... - Aaron
显示剩余4条评论
2

我不确定，但是尝试添加这个代码可以使填充生效。

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

将行高设置为normal，这是Firefox的一个bug，使用行高%即可。我觉得这样就可以解决问题了。

谢谢，但这并没有改变任何东西，除了布局（边距/填充）。我也不认为这是Firefox的错误，因为Firefox在所有大小下都正确显示字体。 - jeroen
1
在@font-face中，有几个CSS声明可以使用：font-family、font-size、font-stretch、font-style、font-variant、font-weight、unicode-range、units-per-em、src、ascent、bbox、cap-height、definition-src、descent、panose-1、slope、stemh、stemv、widths、x-height、baseline、centerline、mathline和topline。也许你需要尝试一下这些。 - yunzen
谢谢，但在Chrome 16中，我看到两行使用相同字体的文字，均在底部截断小写字母g。你看到了什么？ - jeroen
我看到第一个字体稍微有些不同的是Droid Sans（来自Google），在Google 16、Opera和Safari中底部没有被切割。 - yunzen
我正在使用的字体来自Font Squirrel，但是当我转到Google Webfonts本身时，在Opera和Chrome中都可以轻松重现18px的问题，因此我认为Google没有比Font Squirrel更好的版本。 - jeroen
Windows 7的64位版本，是的。我上传了一张截图。 - yunzen
显示剩余4条评论
0

当我使用Google字体"Lato"时，我也遇到了渲染文本底部被裁剪的问题。在我的情况下，我需要将字体文件从Google Fonts本地化。为了做到这一点，我采取了以下步骤：

这样就解决了我渲染文本被裁剪的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接