为什么Font看起来与浏览器不同

Question

为什么字体在不同浏览器中的显示方式有很大差异？我使用相同的css（css3）和相同的字体（Source Sans Pro）。以下是更好定义的屏幕截图：

Firefox Image

Chrome图像

Firefox Image

Chrome图像

你可以看到很多不同之处，firefox中的文字很清楚，但在chrome中看起来很可怜​​。关于如何在所有不同的浏览器（跨浏览器）中使它们看起来完全相似的任何建议？

Answer 1

字体因操作系统和浏览器而异。这是一个有点复杂的过程，所以我会看看这个article关于在OS和浏览器中呈现字体的原因和方式。如果该文章没有提供足够深入的答案，那么网络上还有很多其他资源可以提供有关此主题的补充信息。

Answer 2

实际上，几乎不可能让它们在不同的浏览器中看起来相同（即使在相同的操作系统上运行）

每个浏览器都有不同的字体渲染策略（每个操作系统也是如此），它主要依赖于OS例程在网页上呈现字体，几乎没有像字距调整和连字一样的东西，以及下划线位置的应用和浏览器控制下的厚度，所以我们不能指望在所有浏览器中完全相同的渲染（即使在一个平台上）

你可以在这里阅读更多相关信息。

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

Answer 3

要使它们看起来完全相同，您可以创建自己的字体并为每个浏览器稍微修改它，并使用反复试验直到它们看起来相同。

或者，更好的选择，您可以使用图片而不是文字。

我认为更好的选择就是选择一种看起来都不错的字体。

Answer 4

您可以使用<canvas>或SVG使其保持一致。要了解使用canvas MDN has a good reference和SVG MDN also is a good reference这样做的基础知识。最好的方式是我们有一个更好的方法，但这是我知道的唯一方法，使其在没有图像的浏览器中完全一致

正如Minitech在评论中提到的，这不是SEO问题，因为你只是替换页面上的内容，例如当你在画布上写上“标题”时<canvas>Title</canvas>

这种方法的问题，正如Minitech所提到的，它的互动性。它们实际上都会产生类似图像的结果并分享这些限制

从半方面来看，CanvasPod是一个非常适合移动开发的工具，包括允许字体保持一致