CODEWITHSUNDEEP
cssfont-face
Gajus
Gajus

Reputation: 73848

@font-face and line-height issue

Image below displays the result for:

div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; }

One using Wiesbaden (which is font-face) and the other without.font-face font seem to ignore the line-height property.

screenshot

Is it font-face issue or the font?

Upvotes: 1

Views: 10577

Answers (6)

kirea
kirea

Reputation: 41

Thanks to @Uikithemes for their advice.

I had an issue of displaying a font-face vertically shifted on Windows solely. I managed to normalize the font among all OSs with just

ascent-override: 100%;

Upvotes: 0

Uikithemes
Uikithemes

Reputation: 75

I tried this and it works perfectly!! just play with percentage until you find the needed result.

Apply this on your @font-face:

ascent-override: 90%;

Hope it helps!

More info:

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override

Upvotes: 2

Dawson
Dawson

Reputation: 7597

The following fiddle illustrates the differences between 4 fonts (3 being very common fonts found on Macs, PCs, etc). One is a Google-font. Regardless, 4 fonts - four different results. If a design is going to rely heavily on a 'non-standard' font, be sure the fallbacks don't blow the whole thing up.

Pay particular attention to the differences in:

  • the top spacing between the capital Q and its parent's border
  • the various heights of the Xx (especially, the lower-case vs capital)
  • descender of the lower-case G (some actually come out of their parent)

_http://jsfiddle.net/suK2U/

Four fonts - Four results

Upvotes: 0

saomi
saomi

Reputation: 885

I had a similar issue, but I used a Cufon script instead of fontface to avoid browsers issues. To solve my line-height issue I changed the doctype from transitional to strict. Try that.

Upvotes: 1

Shauna
Shauna

Reputation: 9596

In short, it's not an issue with either. They're behaving exactly how they should be. See your blue background? That's your line-height. Line-height doesn't affect the font itself, but rather the spacing of the lines of the text.

Some fonts are different sizes even when set to the same font-size. It's the way the glyphs are rendered. If you want your text larger, increase the font size. If you want fallbacks to be the same size, you can use similarly-sized fonts (look up "font stack generators" for help on this), or check out the CSS3 font-size-adjust property (do note that it is CSS3, so you'll want to double-check support of it).

Upvotes: 2

hughes
hughes

Reputation: 5713

The property line-height only specifies the vertical distance between the start of one line and the start of the next. If you typed out something that took up two lines, the start of the 2nd line should be in the same vertical position using either font.

It seems like that's just how your font looks at 'font-size: 50px'. If you wanted to, you could increase the font-size while keeping line-height: 50px to correct it.

Upvotes: 5

Related Questions