Geek asks and answers

CSS native vertical offset font (bug?)

I use my own font in my CSS using this method:

@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot');
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'),
         url('Gabriola.woff') format('woff'),
         url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.gabriola {
  font-size: 20px;
  line-height: 20px;
  height: 20px;
  background: red;
}

<div class="gabriola">Some texty text here</div>

Each browser displays these fonts in its own path with a vertical offset above and below, like this font rendering

What am I doing wrong? Thanks

+5
source share
3 answers

Perhaps you are not doing anything wrong. Here are some points that may apply, some controlled by you, some not.

  • To be sure, explicitly install vertical-align: baseline.
  • Different files ( .eof, .woff, .ttf) themselves can not be determined equally, and therefore, different browsers use different files and displaying the differences.
  • , src , :
@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot'),
         url('Gabriola.eot?#iefix') format('embedded-opentype'),
         url('Gabriola.woff') format('woff'),
         url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

. # 1, 3. №2, , .

, , :

, . Windows Internet Explorer, . , .

. Font Squirrel, :

, . , .

,

, - .

№ 2.

+5

, 5 , , .

Basically, a text container should be an inline block with line height: 0; Then you create the inline-block pseudo-element and set its height according to the desired line height:

span {
  font-size: 2em;
  background: red;
}
span.baseline-align {
  vertical-align: baseline;
}

span.true-baseline-align {
  display: inline-block;
  line-height: 0;
}
span.true-baseline-align::after {
  content: '';
  display: inline-block;
  height: 1em; // this is where you control line-height
}
<span>Normal text</span>
<br><br>
<span class="baseline-align">With vertical-align: baseline</span>
<br><br>
<span class="true-baseline-align">with trick to really baseline-align</span>
Run code

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/

+2
source

More articles:


All Articles