Webfont (@font-face) 行高问题

15

我通常在开发的网站中嵌入 webfont (@font-face),直到今天我才遇到一个大问题。

实际上,我觉得行高存在一个很大的问题。我的英语不是很好,所以我会尝试用图片来说明。我已经联系了从 fontshop.com 购买字体的支持团队,但他们似乎无法理解 / 解决这个问题。

使用标准桌面字体时我们拥有的效果(对我们而言呈现良好):

使用 font-face 时我们拥有的效果(CSS 样式表没有变化):

CSS 代码如下:

#content h1 {
    background:#000000;
    color:#FFFFFF;
    font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
    font-size:35px;
    line-height:30px;
    padding:10px;
    text-transform:uppercase;
}

3
另一张图片来解释... - Thibaut
请发布一些代码,最好是演示问题的最小案例。另外,请解释为什么您认为这是行高问题。 - Jukka K. Korpela
1
作为提示,请查看此图像:http://en.wikipedia.org/w/index.php?title=File:Typography_Line_Terms.svg&page=1 首先,每种字体在顶部和底部都有一些额外的空间,有些更多,有些更少,而且每种字体都不同。唯一的解决方案是 - 使用边距/填充调整元素,直到它适合为止。最好的使用行高的方法是实现“基线网格”,就像印刷媒体中使用的那样 - 看看报纸:每个文本都“在线上” :D - Rockbot
感谢您的回复@Rockbot,我知道可以通过填充/边距来解决问题,但我不想使用这种有点“肮脏”的技术...有没有一种方法来解决高度问题?我知道Font Squirell网站的字体生成器可以调整此问题,我曾经用不同的字体做过,但它不允许我上传这个新字体(FF DIN)...无论如何,我想知道这是否与我使用“text-transform: uppercase”有关。底部的空间来自于它为字符提供了基线以下的位置...可能吗? - Thibaut
1
如果您找到了解决方案,请告诉我们! - Rockbot
显示剩余4条评论
7个回答

5

这不是同一种字体。字母O的形状和字母R臂部的曲率揭示了这一点,这意味着回退字体正在使用,很可能是由于@font-face未能正确加载。正如已经说明的那样,不同的字体将具有不同的默认间距,这也会让你认为这是一个行高问题。

尝试将您的回退字体设置为非常明显的东西,比如:

font-family:"DINPro-Bold",serif;

5
通常字体网站下载后会有配置Webfont包的方式。 我从myfonts.com购买所有字体,在高级设置中有行高调整选项。 如果可以,请尝试使用本地行高调整来下载字体。 如果没有,可以尝试将字体上传到fontsquirrel的在线字体生成器并上传新版本。

值得注意的是,以任何方式修改字体文件都违反了几乎所有优质网络字体提供商的服务条款。 - aksu

2
这对我很有帮助:
Font Squirrel生成网络字体。上传字体后,选择“专家”,向下滚动并选中复选框“X-height Matching”。这将调整高度以匹配x-height。

0
如果您在Web字体的行高方面遇到问题(特别是如果字体在项目中应该很大),请尝试以下方法:将您的字体放在div或其他块元素中,并将"overflow"设置为"hidden"。 Div将具有您字体的确切高度,因此任何额外的空间都将被裁剪掉。

-1

请尝试使用position: relative; paddint-top: 5px; padding-bottom: 0px;


-1
尝试在“h1”标记中添加“position: relative; top: 5px;”。

-2

根据wikipedia,行高是指排版中每行文字之间的垂直距离。

在印刷排版中,行距(leading)是指每行文字之间添加的垂直间距。

可以通过以下方式实现...

.class{ line-height: 1em; }

但如果您想调整字母的高度,则无法做到。这是所选择的字体的一部分。


抱歉,如果我没有理解您的问题,因为我看不出这两个图像之间的区别。 - cih
2
也许通过这张图片会更清晰?http://cl.ly/image/1G2w2I3h281o - Thibaut
如果使用 !important,可能会与其他样式发生冲突。可以随意发布一个 fiddle,我会看一下。 - cih

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