Text is not vertically centered

Question

I'm using the line-height property to align some text to icons in a menu. I've created a simplified version (without icons) to illustrate my problem. It seems to be a problem with the general vertical alignment of fonts.

You can see this problem on jsfiddle: http://jsfiddle.net/KFxG3/1/

The code is really simple:

 <div>qb - Some text - qb</div>

An adding a style:

 div {
     background-color: green;
     height: 22px;
     line-height: 22px;
     font-size: 20px;
     font-family: 'Segoe UI', 'Verdana', 'Arial';
 }

This is how it looks like:

And this is how it SHOULD look like:

Why does this happen in newer browsers? I've tested it on Windows 8.1 64 bit in Firefox 27.0.

EDIT: I want to know, WHY the browsers does not render correctly. A small letter like 'a' should get the same space to the top and bottom of the 'green', when applying a line-height thats as height as the container. But the rendering is wrong.

EDIT#2: It's an issue with the font. Segoe UI seems to have a strange baseline. When using Arial, Verdana or whatever vertical alignment fits better (but it's also not perfect). -> http://jsfiddle.net/KFxG3/22/

Answer 1

Each browser support different type of file format because of this sometimes browsers are not able to render the font properties as expected and line-height issue occurs.

For paid fonts always add all the font extension files to your fonts/vendors folder and use the below format to add fonts in your stylesheet.

font-face format:

       @font-face {
         font-family: 'MyWeb';
         src: url('webfont.eot'); /* IE9 Compat Modes */
         src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

For more details you can refer below link: https://css-tricks.com/snippets/css/using-font-face/