为什么不同浏览器中字体看起来有很大的差异？我使用相同的 CSS（CSS3）和相同的字体（Source Sans Pro）。以下是更好的定义的屏幕截图：
Firefox 图像
Chrome 图像
Firefox 图像
Chrome 图像
为什么在不同浏览器中字体看起来不一样？
4
- Faizan
14
3字体在不同的操作系统/浏览器中呈现的方式会有所不同，因为它们实际上并不完全相同。这是由于渲染引擎的差异所致... - DrCord
1@Faizan 这取决于浏览器和操作系统。 - ajp15243
2简短回答是（我在几年前进行了彻底的研究），你只能接受它，选择不同的字体或者使用图片。浏览器（和操作系统）无法始终正确呈现文本，这很糟糕。 - Zach Lysobey
1让问题变得更糟的一件事是，你可以避免将字体加粗/斜体应用于不“本地”支持它的字体。浏览器在处理这些东西的方式上有所不同。 - Zach Lysobey
1@minitech - 你能提供你字体的链接吗？假设它像这样是谷歌字体（http://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro），你实际上必须选择你支持的字体大小。 - Zach Lysobey
显示剩余9条评论
4个回答
5
字体在操作系统和浏览器中各异。这是一个相当复杂的过程，因此建议您查看此文章，了解字体在操作系统和浏览器中如何呈现以及为什么会这样。如果那篇文章没有提供足够深入的答案，网络上还有许多其他资源可以提供补充信息。
- atrljoe
2
实际上，即使在同一操作系统上运行，让它们在不同浏览器中看起来完全相同几乎是不可能的。每个浏览器都有不同的字体呈现策略（每个操作系统也是如此），它主要依靠操作系统例程在网页上呈现字体，有一些像字距和连字之类的东西，以及下划线位置和粗细的应用，在浏览器的控制下，因此我们不能期望在所有浏览器中（甚至在一个平台上）完全相同的呈现。您可以在这里阅读更多信息：http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/。
- gaurav5430
0
要使它们看起来完全相同，你可以创建自己的字体并为每个浏览器进行轻微修改，然后使用试错法直到它们看起来一样。
或者，更好的选项是使用图像代替文本。
我认为甚至更好的选择是只选择在两个浏览器中都好看的字体。
或者，更好的选项是使用图像代替文本。
我认为甚至更好的选择是只选择在两个浏览器中都好看的字体。
- Andrew
4
前两个选项不好，第三个也不能接受...还有其他的选择吗？ - Faizan
2重要提示：如果您使用图像而不是文本，可能会对SEO产生负面影响。文本也比图像更容易编辑。 - WP_
2你的第三个选项基本上是唯一好的选择。第一个选项根本不起作用 - 自定义字体在浏览器之间仍然存在差异，你几乎无法使它们看起来相同。 - Ry-
如果使用图像，请确保使用
alt文本（对于<img>）或某些文本替换技巧（如text-indent：-999em），以便您不会失去所有SEO mojo。我认为有工具可以基于您的文本自动生成服务器端的图像（这样就解决了“难以编辑”的问题），但实际上，您最好的选择是咬紧牙关并选择一个在您需要的所有位置都呈现良好的字体。 - Zach Lysobey-1
您可以使用<canvas>或SVG使其保持一致。要了解如何使用canvas的基础知识，MDN有一个很好的参考资料，使用SVG MDN 也是一个很好的参考资料。最理想的情况是我们有更好的方法，但这是我所知道的唯一一种在没有图像的情况下使其在各个浏览器中完全一致的方法
正如Minitech在评论中提到的那样，这不是一个SEO问题，因为您只是替换页面上的内容，例如当您在画布上写“Title”时，<canvas>Title</canvas>
这种方法的问题，正如Minitech再次提到的那样，是互动性。它们都实际上产生类似于图像的结果，并共享相应的限制
半边注意，CanvasPod是一个非常好的工具，专为移动开发而设计，包括允许字体保持一致
- Zach Saucier
6
请纠正我，但这难道不会破坏SEO（附注：我没有给它点踩）？ - Zach Lysobey
2@ZachL：如果你替换原本在页面上的文本（这是唯一好的方法），那就不会有问题，但是对于缩放、选择、样式、交互等方面仍然很糟糕。 - Ry-
为什么这个问题会被踩？他明显在回答OP的问题：“如何使它们在所有不同的浏览器中看起来完全相同”。虽然这不是一种“理想”的方法，但它确实是一种有效的方法。 - Zach Lysobey
Minitech是正确的。我不确定为什么会被踩，因为这是唯一使其保持一致的方法，而不需要图像... - Zach Saucier
你可以使用Flash（SFIR（？））或SVG或其他类似的技术来实现相似的效果，对吧？ - Zach Lysobey
1使用路径的SVG比画布更好，但仍然无法选择，并且由于字距调整，缩放可能会产生比文本更糟糕的结果。 - Ry-
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
- 相关问题
- 5 为什么我在同一浏览器中实现Google的开放字体示例时，它们看起来与示例不同？
- 18 为什么我的字体看起来如此粗体？
- 9 在Photoshop和网站上，字体看起来不一样。
- 4 为什么在移动浏览器中，某些字体大小看起来更大？
- 16 在浏览器和 Photoshop 中，颜色看起来不一样
- 6 为什么Firefox浏览器中的Web字体在不同域名下无法工作？
- 65 除了字体重量在不同浏览器上看起来不同之外，其他都相同。
- 4 在Windows 7浏览器中，嵌入字体的字体看起来有点模糊。
- 27 为什么Chrome中的字体看起来会有锯齿状？
- 3 在Firefox浏览器中，Google Web字体和其他字体看起来加粗而且锯齿明显。