Question

我正在使用下载的字体文件在我的网站上使用，但是这会导致布局/显示方面的一些问题。

我使用过的大多数字体都是这样显示的

我当前使用的字体显示为 this ：

区别在于，第一种字体上面有空格（这是实际文本的一部分，而不是我的CSS样式），而第二种字体根本没有空格。

我可以通过在包含元素的顶部添加一些额外的填充来解决此问题，但这在将来决定替换字体的情况下不可行（这意味着我必须进入每个父级并删除{{ 1}}）

是否可以使用CSS样式方法在字体中添加填充，以使顶部始终留有一些空间？

我的代码：

CSS：

padding-top

HTML：

@font-face {
    font-family: "Anakin Mono";
    src: url("../fonts/opipik_anakinmono/anakinmono.ttf");
}
#demo {
    font-family: "Anakin Mono";
    padding: 14px 10px 10px 10px;   /* Have to add extra padding to top becuase of font in use */
    border: 1px solid black; /* A border helps illuminate whats happening with text alignment - vertically;
}

Answer 1

是否可以使用CSS样式方法在字体中添加填充，以使顶部始终留有一些空间？

不幸的是，正如您所概述的，此问题的答案是否，没有CSS方法只能将单个字体作为目标。

也就是说，您可以使用一个类简单地分配等宽字体，然后轻松地全局更改样式，如下所示：

@import url('https://fonts.googleapis.com/css?family=Inconsolata');
.monospace {
  font-family: 'Inconsolata', monospace;
  padding-top: 4px;
}

<div class="monospace">This element is monospaced font</div>

任何您要使用等宽字体的元素都应分配为monospace类。将来，您只需更改font-family规则并更改填充和文本，就可以轻松完成更改。

我意识到您已经在评论中明确表示您希望采用其他方法，但是我认为这是绝对最佳的解决方案/变通办法，将使您以最少的精力获得所需的东西。最多，这将需要您更改标记以在需要的地方添加monospace类，但是无论如何这可能都是朝着正确方向迈出的一步。

Answer 2

您可以使用line-height。将您的CSS更改为此：

#demo {
    font-family: "Anakin Mono", sans-serif;
    line-height: 3;
    padding: 0 10px;
    border: 1px solid black;
}

您可以尝试使用不同的line-height值。它接受原始线高的倍数。 px或em。

始终记住不要在font-family中仅使用一种字体。如果您的字体尚未加载/无法加载，请使用一种以上的字体来提供后备字体。

此外，除非文件大小较小，否则不建议使用自托管的TTF字体。尝试使用CDN托管的网络字体（例如Google字体）以获得更好的性能。

JSFiddle演示：https://jsfiddle.net/okawrcuf/6/（出于演示目的，我使用了Google字体中的另一种字体，因为我没有您的字体）

如何给字体填充？

2 个答案: