文字未垂直居中 [英] Text is not vertically centered

问题描述

我正在使用line-height属性将某些文本与菜单中的图标对齐.我创建了一个简化的版本(没有图标)来说明我的问题.字体的一般垂直对齐似乎存在问题.

您可以在jsfiddle上看到此问题:

解决方案

每个浏览器都支持不同类型的文件格式，因此有时浏览器无法按预期呈现字体属性，并且会出现行高问题.

对于付费字体，始终将所有字体扩展文件添加到fonts/vendors文件夹中，并使用以下格式在样式表中添加字体.

字体格式:

  @ font-face {font-family:"MyWeb"；src:url('webfont.eot');/* IE9兼容模式*/src:url('webfont.eot?#iefix')format('embedded-opentype')，/* IE6-IE8 */url('webfont.woff2')format('woff2')，/*超现代浏览器*/url('webfont.woff')format('woff')，/*漂亮的现代浏览器*/url('webfont.ttf')format('truetype')，/* Safari，Android，iOS */url('webfont.svg#svgFontName')format('svg');/*旧版iOS */} 

有关更多详细信息，请参见以下链接: https://css-tricks.com/snippets/css/using-font-face/

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/

解决方案

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/

这篇关于文字未垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！