6

我在使用 Google webfonts 时遇到了一些问题。

我正在使用名为“Bitter”的 Google Webfont。但在 Firefox 和 Chrome 中，它的呈现方式有所不同。Chrome 和 Opera 似乎以类似的方式呈现它。它并没有太大的不同，但它弄乱了段落的格式和组成。

这是CSS：

.small-col h3{

color: #606060;
font-family: 'Bitter', Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;

}

这是我正在谈论的问题的屏幕截图：http: //i49.tinypic.com/2u46mpi.png

谁能建议我如何在 Firefox、Chrome 和 Opera 中获得一致的渲染？

谢谢

4

5 回答 5

9

字体永远不会在所有浏览器中呈现相同的。他们使用不同的渲染引擎——试图让网站在每个浏览器上看起来都一样是徒劳的。

对于您的具体问题，请使用不间断的空格来防止联系和我们分开。

<p> ... contact&nbsp;us </p>
于 2012-10-18T16:07:20.553 回答
1

我对衬线字体有同样的问题。如果您写"serif"而不是serif（不带“”），Chrome 将呈现与 Firefox 相同的内容。

于 2014-01-24T19:44:49.220 回答
1

浏览器之间的字体渲染可能存在差异，但更常见的是，平台之间存在差异。

但是，这里的差异似乎是由字母间距引起的。更准确地说，Firefox 正确地应用了它，而 WebKit 浏览器则没有。对于16px字体大小，-0.06em应该会导致超过一个像素，如果您使用检查模式（F12，计算样式），您将看到 Firefox 适用-1px，而 Chrome 使用normal（即，零）用于letter-spacing. Chrome 似乎对字母间距值有一些阈值；让它-0.065em改变一些事情。

因此，特别是如果您更喜欢 Chrome 渲染，只需省略letter-spacing. 通常最好避免字母间距——字体设计师应该更清楚，如果你同意她或他的选择，请使用另一种字体，而不是试图“修复”字体。

浏览器之间的差异之一是 Firefox 默认应用字距调整，而其他浏览器则没有。但这与示例中的特定文本无关，因为 Bitter 的字距调整表只有成对的大写字母（例如，“VA”看起来会有所不同）。

于 2012-10-18T17:00:52.627 回答
1

看起来firefox渲染的重量有点不同，间距也有点不同。也许也可以尝试以数字方式定义它们，以覆盖任何浏览器默认值。不幸的是，不同的浏览器，尤其是操作系统有时喜欢以不同的方式呈现字体，并且有时会按照自己的规则。

于 2012-10-18T16:06:25.123 回答
-1

尝试使用提供的 javascript 代码而不是 css 或 @import 将 google webfonts 代码添加到您网站的头部。

这解决了我在这个主题上的问题。

于 2013-03-28T10:50:35.360 回答