12

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

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

小写尤其明显g。

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

line-height例如，padding不要更改任何内容，20pxfont-size工作正常，目前我正在使用 Windows 7。

编辑：顺便说一句，我在这里知道一个类似的问题，但由于接受的答案正在改变字体大小，而其余答案不适用，它对我没有多大用处。

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

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

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

Chrome 16，谷歌网络字体

4

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

于 2011-12-23T14:35:07.610 回答
7

对于类似的问题，一个答案表明，虽然这似乎是一个 Windows 字体渲染问题，但托管包含未针对网络优化的字体的 TrueType 字体 (TTF) 的 svg、eot 和 otf 版本已修复其提供者的问题。如果可能，获取一个干净的、未优化的 DroidSans 字体版本并自己导出网络字体。

编辑：对不起，我出去度假，无法访问 SO。自从我回来后，我已经对 Windows 机器上导致此问题的确切原因进行了一些研究......

看来问题在于 OpenType 格式在 Windows 机器上的呈现方式。截断后裔的问题似乎超越了软件类型，影响了多个尝试呈现 OpenType 的 Windows 程序。目前，您的 CSS 文档中第一个列出的字体的嵌入式 OpenType 格式 (EOT) 版本位于@font-face. 由于 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 已被编辑以避免将来混淆。各位小伙伴们，请原谅我的混淆...

于 2011-12-22T22:22:07.610 回答
2

I am not sure but try to add this for padding to work

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

Set the line height to normal, it is a firefox bug and use the line height in % I think this might do the trick

于 2011-12-21T22:55:05.077 回答
1

这一切都归结为字体本身。

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

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

编辑 1 个
屏幕截图
http://imageshack.us/photo/my-images/811/screeniy.png/
在此处输入图像描述

于 2011-12-26T21:40:45.420 回答
0

我也看到我的 Google 字体“Lato”在渲染文本的底部被截断。就我而言，我需要在本地提供字体文件，而不是使用 Google 字体。为此，我：

  • 使用 Font2Web将字体从 .ttf 转换为 webfont文件
  • 在本地提供字体文件作为来自本地主机的静态文件资产
  • 使用防弹@font-face 实现在我的css中包含字体

这消除了我截断的渲染文本问题。

于 2014-12-09T21:06:03.573 回答