0

我最近为一个网站项目购买了几种字体，我发现使用其中一种字体并不有趣。它被称为Goodlife Sans，我遇到的问题是字体字符上方包含大量空白，即字体比字形本身占用更多的垂直空间。

很难设置垂直边距，因为我必须考虑字体占用的额外空间。设置line-height: 1em有点帮助，但行高是从字体的最顶部开始测量的，这意味着如果文本设置在块元素中overlow: hidden，则字母的底部会被裁剪掉。

下图显示了字体本身的高度，以及 line-height hack。为了清楚起见，块元素的背景被涂成红色。

http://i.stack.imgur.com/VAjKz.png
http://i.stack.imgur.com/ffL9l.png

编辑：这是代码

@import url("//hello.myfonts.net/count/2e978a");

@font-face {
    font-family: "GoodlifeSans";
    src: url("fonts/2E978A_0_0.eot");
    src: url("fonts/2E978A_0_0.eot?#iefix") format("embedded-opentype"),
         url("fonts/2E978A_0_0.woff2") format("woff2"),
         url("fonts/2E978A_0_0.woff") format("woff"),
         url("fonts/2E978A_0_0.ttf") format("truetype");
} 
p {
    font-family: "Goodlifesans";
    font-size: 344%;
    background: red;
    text-align: center;
    /*line-height: 1em;*/
    margin: 0;
    padding: 0;
}
body {
    margin: 10px;
    font-size: 80%;
}

<body>
    <p>This is the test title text</p>
</body>

如果没有实际修改字体本身（我相信许可会阻止我这样做），是否有一个优雅的解决方案来解决这个问题？我真的不想每次使用这种字体时都必须包含一个负边距的父元素。

4

1 回答 1

1

最后，HDV Fonts 的人给我发了他们的字体文件副本，解决了这个问题。myfonts.com 的文件显然包含奇怪的垂直度量，这解释了我所看到的。

于 2015-10-25T04:45:22.797 回答