Do all font ascenders/descenders have the same spa

2019-07-13 22:36发布

问题:

Do all font ascenders/descenders have the same space above/below? I'm trying to write a global stylesheet which will take away top and bottom space from h1-6 elements which I found to be no more than 8 pixels or so (which lowers as the h elements lower.) The reason I'm considering this is because I won't have any tall characters which will occupy the ascender/descender so I really have no usage for it (plus I need exact precision in the positioning of my elements.)

My question is if all fonts have the same ascending/descending space, or if it varies by font or OS or browser.

回答1:

Do all font ascenders/descenders have the same space above/below?

Nope

It varies by font, by OS, by Browser, and probably lunar cycle as well. You can expect fonts to consistently be inconsistent.

Some fonts don't even have the concept of ascenders/descenders. What would you do if an icon font was used? Some fonts align descenders such that they don't even descend below the baseline. Others, such as calligraphic fonts tend to drop below the baseline, whether or not the character has an actual descender.

When I'm building pages off of comps that don't include font-size descriptions, I often have to render a large set of varying font-sizes of a particular family. I have a utility webpage that I use locally so that I can determine which font size must be used, and what font alignment will work.

Example:

This example uses Arial, and even Arial renders differently for some sizes between Chrome, Firefox and IE. When you're using sets of fonts you then also have to worry about all the other options in the set, in case the user doesn't have that font installed.


If you absolutely must have an exact rendering, you should be using an image to render the text. Use the [alt] attribute to reference the text in the image. It's not as manageable as text because it requires re-rendering every time a content change is desired, but it works well enough, especially for things like logos which absolutely must render in a specified manner.