Question

我网站上的某些文字在Chrome上奇怪地分为两行。在FF和IE上，它非常适合单行。我读过的浏览器可能都有自己的渲染字体的方式。有办法解决这个问题吗？

HTML：

<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<div class="text-centered span3">                        
    <p>Wnii tagfF rouirsoSan olwre.i dlyrbr peato.</p>                       
</div>

CSS：

.span3 {
    width: 240px;
}
p {
    font-family: 'Signika';
    font-size: 13px;
}

链接到小提琴：http://jsfiddle.net/yishaib/Qqgxt/

*显然，我已经把文字弄乱了。

Answer 1

尝试让字体在所有浏览器中呈现相同，因为它们使用不同的渲染引擎，这是一个失败的原因。

但是，在你的情况下，你可以修补字母间距。它并不理想，但我可以通过将字母间距设置为-1px来使文本保持在Chrome中的一行。

<强> CSS

p {
font-family: 'Signika';
font-size: 13px;
letter-spacing: -1px;
}

Answer 2

我已经检查过Chrome，我已经解决了这个问题：

我使用了@import，没有链接参考。

检查我的小提琴：

http://jsfiddle.net/Qqgxt/12/

@import url(http://fonts.googleapis.com/css?family=Signika);

Answer 3

没有办法让字体显示为相同的跨浏览器/跨操作系统。

Typekit发布了一篇关于该主题的文章：http://blog.typekit.com/2010/12/17/type-rendering-review-and-fonts-that-render-well/和http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

每个出色的网络浏览器都有一个明确决定的布局引擎如何将我们的标记，样式表和脚本变为生活，呼吸网站。

现在，如果您尝试显示未安装在计算机上的字体，浏览器将尝试降低渲染质量以显示“浏览器”将选择的字体。主要是从'serif'决定 - 'sans-serif' - 'monospace'。

如果您将字体与外部源（typekit - googlefonts等）与@ font-face链接，浏览器将呈现他们获得的资源。请记住，任何浏览器都会以他们的方式“显示”您的内容（比如图像）。

图像不会有从浏览器到浏览器的相同颜色，因为渲染引擎必须处理'像素，像素深度，分辨率，语言和成千上万的元素）Retina任何人？

Answer 4

是的，字体渲染可能是一个大问题，通常很难修复。您的另一个问题可能是“Signika”不是谷歌浏览器识别的网络字体。尝试通过谷歌字体导入字体文件，如果有的话。

Chrome浏览器上的字体宽度不同

4 个答案: