logo标签列表

谷歌网络字体在Firefox、Chrome和Opera中呈现不同

cssfirefoxgoogle-chromeformattinggoogle-webfonts
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中获得一致的渲染效果吗？
谢谢。
2
早就放弃了在不同的浏览器中实现字体一致的方式，因为它们使用不同的渲染引擎，而且处理方式也不同。 - Orbling
Chrome 的字体渲染垃圾，过去如此，将来也一定如此。除了在各种浏览器中找到你可以接受的字体之外，实际上并没有什么你能做的。我想 Safari 也应该看起来和这些浏览器相同，因为它也是使用 Webkit。 - Rick Calder
5个回答
9

字体在不同的浏览器上渲染效果永远不会完全相同。它们使用不同的渲染引擎，试图让网站在每个浏览器上看起来完全相同是徒劳的。

针对您的具体问题，使用非断空格可以防止“contact”和“us”被分开。

<p> ... contact&nbsp;us </p>
1

看起来 Firefox 渲染字重和间距有点不同。可能要试着以数值定义它们，以覆盖任何浏览器默认设置。不幸的是，不同的浏览器，特别是像操作系统这样的 OS 有时会按照它们自己的规则以不同的方式呈现字体。

谢谢Patrick。 我尝试使用像素和“em”来定义间距，但问题仍然存在。 您提到的其他间距选项是什么？ - saicode
尝试具体设置 letter-spacing: 0。 - daGUY
你已经在使用字母间距（你可以尝试定义为像素或点而不是em以获得更精确的控制），然后是字重（你可以使用定义如“bold”、“normal”等，或数字如“100”、“200”、“300”等）。如果你快速搜索CSS字体样式，你应该能找到更完整的更好的信息。但即使定义了每一个小细节，每个浏览器仍然可能会呈现不同，需要谨慎对待。 - Patrick JC
尝试使用以下样式：'letter-spacing: 0px; font-style: normal; font-weight: 400; text-transform: none; text-decoration: none;'但似乎不起作用 :( - saicode
1

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

然而，在这里，差异似乎是由字母间距引起的。更确切地说，Firefox 正确地应用了它，而 WebKit 浏览器则没有。对于 16px 字体大小，-0.06em 应该产生略微超过一个像素的效果，如果您使用检查模式（F12，计算样式），您将看到 Firefox 应用了 -1px，而 Chrome 使用 normal（即零）作为 letter-spacing 的值。Chrome 似乎对字母间距值有一些阈值；仅将其设置为 -0.065em 就会改变事情。

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

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

感谢Jukka的解释。 如果我使用像素(px)代替em会更好吗？如果我使用像素(px)代替em，好像没有任何区别。 在字母间距方面，使用像素(px)代替em是否有任何缺点？ - saicode
如果您使用letter-spacing: -1px，那么Chrome似乎会遵守它。这很奇怪。它使填充固定，因此如果用户强制使用不同的字体大小，则不会进行调整。但是，如果您喜欢当前缺少它的Chrome渲染，为什么要设置字母间距呢？ - Jukka K. Korpela
1
我曾经遇到过衬线字体的问题。如果你写"serif"而不是serif（不需要引号），Chrome 将会像 Firefox 一样渲染。
我可以确认：这对其他浏览器也适用。谢谢@Greg！ - Murad Alm.
-1

尝试使用提供的JavaScript代码将Google Web字体代码添加到您网站的头部，而不是使用CSS或@import。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接