1

我网站上的一些文本在 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/

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

4

4 回答 4

2

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

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

CSS

p {
font-family: 'Signika';
font-size: 13px;
letter-spacing: -1px;
}
于 2013-07-10T13:17:55.823 回答
1

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

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

检查我的小提琴：

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

@import url(http://fonts.googleapis.com/css?family=Signika);
于 2013-07-10T13:22:45.607 回答
1

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

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/

每个优秀的 Web 浏览器都有一个布局引擎，它明确决定如何将我们的标记、样式表和脚本变成活生生的网站。

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

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

由于渲染引擎必须处理“像素、像素深度、分辨率、语言和数千个元素）Retina，导致图像在不同浏览器之间的颜色不同？

于 2013-07-10T13:28:07.283 回答
0

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

于 2013-07-10T13:30:40.900 回答