为什么字体看起来与浏览器不同答案

【问题标题】：Why Font looks differ browser to browser为什么字体看起来与浏览器不同
【发布时间】：2013-12-17 02:57:25
【问题描述】：

为什么字体在不同浏览器中的外观差异如此之大？我使用相同的 css (css3) 和相同的字体 (Source Sans Pro)。以下是更好定义的屏幕截图：

火狐图片

Chrome 图片

火狐图片

Chrome 图片

您可以在其中看到很多不同，Firefox 中的文本非常清晰，但在 chrome 中看起来很可悲。有关如何使它们在所有不同浏览器（跨浏览器）中看起来完全相似的任何建议？

【问题讨论】：

字体在操作系统/浏览器之间的呈现方式有所不同......这就是它的工作方式，因为它们实际上并不完全相同。渲染引擎启动不一样...
@Faizan 它因浏览器和操作系统而异。
简短的回答（几年前我已经彻底研究过）你只需要处理它，选择不同的字体，或者去图像。浏览器（和操作系统）不会一致地呈现文本。糟透了。
使问题更糟可以避免的一件事是将字体权重/字体样式应用于不“本机”支持它的字体。浏览器处理这些东西的方式不同..
@minitech - 你能提供你的字体的链接吗？假设它的谷歌字体像这样 (google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro) 你实际上必须选择你支持的字体大小

标签： html css google-chrome browser

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

每个浏览器都有不同的字体渲染策略（每个操作系统也是如此），它主要依靠操作系统例程来渲染网页上的字体，很少有字距和连字之类的东西，以及下划线位置的应用和厚度，在浏览器的控制下，所以我们不能期望在所有浏览器（即使在一个平台上）中呈现完全相同的渲染

【讨论】：

【解决方案3】：

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

或者，一个更好的选择，您可以使用图像而不是文本。

我认为更好的选择是只选择一种在这两种情况下看起来都不错的字体。

【讨论】：

前两个选项不好，不能接受第三个..还有其他的吗？
重要提示：如果您使用图片而不是文字，可能会对 SEO 产生负面影响。文本也比图像更容易编辑。
您的第三个选项基本上是唯一的好选项。第一个选项不起作用 - 自定义字体仍然因浏览器而异，而且您几乎无法让它们看起来相同。
如果使用图片，请确保使用alt 文本（用于s）或一些文本替换技巧（如text-indent:-999em），这样您就不会失去所有的SEO 魔力。我认为有有工具可以根据您的文本在服务器端自动生成图像（从而解决“更难编辑”的问题），但实际上，您最好的选择是把它吸干并选择一种在您需要的任何地方呈现OK 的字体。

【解决方案4】：

您可以使用 <canvas> 或 SVG 使其保持一致。要了解使用 canvas MDN has a good reference 进行此操作的基础知识，请使用 SVG MDN also is a good reference。理想情况下，我们会有更好的方法，但这是我知道的唯一方法，可以使其在没有图像的浏览器中完全一致

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

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

顺便说一句，CanvasPod 是一款适用于移动开发的出色工具，包括允许字体保持一致

【讨论】：

如果我错了，请纠正我，但不会搞砸 SEO（PS：downvote 不是我的）
@ZachL：如果您替换页面上的原始文本（唯一的好方法），则不会，但缩放、选择、样式、交互性仍然很糟糕……
为什么这个问题被否决了？他似乎肯定是在回答 OP 的问题：“如何使它们在所有不同的浏览器中看起来完全相似”。它本身不是 idea 方法，但它是一种有效的方法
Minitech 是正确的。而且我不确定为什么我会在没有图像的情况下使其保持一致的唯一方法...
带路径的 SVG 比画布效果更好，但仍然无法选择，并且由于字距调整，缩放它会产生比文本更差的结果。