15

我经常在我开发的网站中嵌入 webfont (@font-face)，直到今天我还没有遇到过重大问题。

其实我觉得line-height有很大的问题，我的英语不是特别好，所以我会尝试用图片来说明它。我已经联系了 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;
}
4

7 回答 7

5

通常字体网站会在你下载 webfont 包时有办法配置它。我从 myfonts.com 购买我所有的字体，在高级设置下有行高调整选项。如果此选项可用，请尝试使用本机行高调整下载字体。如果没有，请尝试将字体上传到 fontsquirrel 的在线字体生成器并上传新版本。

于 2013-05-31T16:07:10.213 回答
5

那不是同一种字体。O 的形状和 R 上手臂的曲率泄露了它，这意味着正在使用后备字体，可能是由于 @font-face 没有正确加载。如前所述，不同的字体会有不同的默认间距，这也会让你相信这是一个行高问题。

尝试使您的后备字体变得非常明显，例如：

font-family:"DINPro-Bold",serif;
于 2013-09-10T22:41:17.423 回答
2

这对我有用：

在Font Squirrel生成 webfont 。上传字体后选择“专家”，向下滚动并选中“X 高度匹配”复选框。这会调整高度以匹配 x 高度。

于 2020-10-27T17:43:58.003 回答
0

如果你的 webfont 的行高有问题（特别是如果你的项目中的字体很大）试试这个：在 div 或其他块元素中关闭你的字体并将“溢出”设置为“隐藏”。Div 将具有您字体的精确高度，因此任何额外的空间都将被切断。

于 2014-01-17T18:18:47.763 回答
-1

尝试添加“位置：相对；顶部：5px；” 到“h1”标签

于 2013-07-18T15:54:44.807 回答
-1

尝试位置：相对；paddint-top：5px；底部填充：0px；

于 2014-01-09T18:58:51.530 回答
-2

根据维基百科的行高

在排版中，前导（与标题押韵）是指在字体行之间增加的垂直间距。

可以这样实现...

.class{ 行高：1em; }

但是，如果您指的是字母的高度，那么这不是可以调整的。它是您选择使用的字体的一部分。

于 2012-10-17T08:28:43.513 回答