chrome浏览器字体宽度不同答案

【问题标题】：Different font width on chrome browserchrome浏览器字体宽度不同
【发布时间】：2013-07-10 21:34:19
【问题描述】：

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

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

【问题讨论】：

请@font-face 下载套件，并下载eot、woff、svg、ttf和使用的本地字体。
在所有浏览器中都适合我。我正在为所有人使用最新版本。

标签： html css fonts cross-browser google-font-api

【解决方案1】：

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

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

CSS

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

【讨论】：

用 ITChristian 提交的小提琴对其进行了测试，这似乎解决了一些问题。

【解决方案2】：

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

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' 决定。

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

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

【讨论】：

很难在这个和@Pete 的回答之间做出选择。我选择这个作为参考链接和广泛的解释。

【解决方案3】：

我已经在 Chrome 中签入并解决了这个问题：

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

检查我的小提琴：

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

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

【讨论】：

嗯...一定是版本问题。 IE 和 Chrome 在小提琴中对我来说显示不同。我的理解是这是一个渲染问题。在创建带有突出显示的自定义按钮时，我遇到了这个问题。
小提琴中的文本适合一行的原因是因为您使用的字体大小为 12px 而不是 13px。

【解决方案4】：

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

【讨论】：

哦，呵呵。在那种情况下，他可能应该只是改变间距。