OS X和Windows之间的文本渲染是否使我的填充物变得空白? [英] Text rendering between OS X and Windows throwing off my padding?

问题描述

伙计们，我正在尝试使用简单的背景颜色和填充来为客户的文章h1设置样式.我需要文本在填充内垂直和水平居中，但是我发现OS X和Windows之间存在基线差异.至少那是我最好的猜测.以下是令人反感的元素的特定代码:

.entry-title {
    color: #fff;
    background: #A3BCC3;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

.normal .entry-title {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
}

以下是屏幕截图:

OS X: http://i54.tinypic.com/2a0bx1v.png

Windows: http://i56.tinypic.com/2gv4vie.png

您会注意到它在Windows上的渲染效果很好，但是在OS X上渲染太高了px.它们在整个浏览器上的渲染效果相同，唯一的区别是操作系统之间的差异.字体是Quicksand Book，通过@ font-face实现.如果您需要查看该网站的有效版本，请访问以下网址:http:////angerg.nom.es/rosebud.如果您设法将其签出，则会注意到主页底部的静态内容页脚也遇到了相同的问题.

无论如何，任何帮助将不胜感激.

解决方案

您的字体文件可能不正确.
我在本地安装的webfont上也遇到了同样的问题. 幸好 Google提供了与网络字体相同的字体，为我解决了这个问题.

Hey folks, I'm attempting to style a client's article h1's with a simple background color and padding. I need the text to be centered vertically and horizontally within the padding, but I'm finding there's a baseline difference between OS X and Windows. At least that's my best guess. Here's the specific code for the offending elements:

.entry-title {
    color: #fff;
    background: #A3BCC3;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

.normal .entry-title {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
}

Here are the screenshots:

OS X: http://i54.tinypic.com/2a0bx1v.png

Windows: http://i56.tinypic.com/2gv4vie.png

You'll notice it's rendering just fine on Windows, but it's a few px too high on OS X. They render the same throughout browsers, the only difference is between the operating systems. The font is Quicksand Book, and is being implemented via @font-face. If you need to see a working version of the site, it's available at http: // angryg.nom.es/rosebud. If you do manage to check it out, you'll notice I'm having the same problem on the static content footer at the bottom of the home page.

Anyway, any help would be greatly appreciated.

解决方案

Your font-files may be incorrect.
I had the same issue with a local installed webfont too. Thankfully Google provided the same font as a webfont, solved the problem for me.

这篇关于OS X和Windows之间的文本渲染是否使我的填充物变得空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！