如何偏移基线高度? [英] How to offset line-height base line?

问题描述

font-face这是很常见的问题，例如

It is very common issue with font-face, e.g.

font: 20px/20px 'ITC Avant Garde Gothic Std'; font-style: 'book'; letter-spacing: 1px; text-transform: uppercase;

问题是我希望文本垂直居中.但是，事实并非如此.有没有办法抵消线高基线?无需实际更改line-height.

The problem is that I'd expect text vertically centered. However, it is not. Is there a way to offset the line-height base line? Without actually changing the line-height.

推荐答案

该现象取决于字体.由字体设计者决定字体如何使用其高度.例如，在Arial中，当设置为实心时，大写基本拉丁字母垂直居中，而在Verdana中，它们显得略低(即上方的空间比下方的空间大).

The phenomenon depends on the font. It is up to the font designer to decide how the font uses its height. For example in Arial, when set solid, uppercase basic Latin letters are vertically centered, whereas in Verdana, they appear a bit lower (i.e., a little more space above than below).

您可以通过相对定位来对此进行微调，但随后需要额外的标记，例如

You can fine-tune this by using relative positioning, but you then need extra markup, e.g.

<div><span>text</span></div>

使用CSS作为span设置，例如

with CSS for the span setting, say,

position: relative;
top: 2px;

如果用户浏览器中使用的字体与您的预期不同，这可能会导致讨厌的结果.

This may cause nasty effects if the font used in the user’s browser is different from your expectations.

我没有考虑font-style: 'book'的可能影响，因为我不知道它可能意味着什么.我知道没有CSS资源提及类似的内容(font-style值是未加引号的关键字，不包含book.)

I did not consider the possible effect of font-style: 'book', as I have no idea of what it might mean. No CSS resource I know mentions anything like that (the font-style values are unquoted keywords and do not inlcude book).

这篇关于如何偏移基线高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！