我在使用Google网页时遇到了一些问题。
我使用的是Google Webfont，名为“Bitter”。 但在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中获得一致的渲染效果吗？
由于
答案 0 :(得分：8)
字体永远不会在所有浏览器中呈现相同的内容。他们使用不同的渲染引擎 - 试图让每个浏览器上的网站看起来都相同是一个失败的原因。
针对您的具体问题，请使用不间断的空间以防止接触和我们分开。
<p> ... contact us </p>
答案 1 :(得分：1)
看起来firefox的重量有点不同，而且间距也有所不同。也许尝试用数字定义那些，以覆盖任何浏览器默认值。不幸的是，不同的浏览器，特别是操作系统喜欢以不同的方式呈现字体，有时甚至根据自己的规则。
答案 2 :(得分：1)
浏览器之间的字体呈现可能存在差异，但更常见的是，平台之间存在差异。
然而，这里的差异似乎是由字母间距引起的。更确切地说，Firefox正确应用它，WebKit浏览器没有。对于16px字体大小，-0.06em应该会产生略高于一个像素，如果您使用检查模式（F12，计算样式），您将看到Firefox应用-1px而Chrome对normal使用letter-spacing（即零）。 Chrome似乎在字母间距值上有一些阈值;仅仅-0.065em改变了一切。
因此，如果您更喜欢Chrome渲染，请忽略letter-spacing。通常最好避免字母间距 - 字体设计者应该更好地了解，如果您同意她或他的选择，请使用其他字体，而不是试图“修复”字体。
浏览器之间的差异之一是Firefox默认使用字距调整，而其他浏览器则不适用。但这与示例中的特定文本无关，因为Bitter的字距调整表只有成对的大写字母（例如，“VA”看起来会有所不同）。
答案 3 :(得分：0)
我遇到了与serif字体相同的问题。如果您使用"serif"代替serif（不使用“”），则Chrome将与Firefox相同。
答案 4 :(得分：-1)
尝试使用提供的javascript代码，而不是css或@import，将google webfonts代码添加到您网站的头部。
这解决了我在这个主题上的问题。