且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何偏移基线高度?

更新时间:2023-11-22 22:14:22

该现象取决于字体.由字体设计者决定字体如何使用其高度.例如,在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).