如何使字体在不同的Web浏览器中呈现相同的方式？

我正在为客户建立一个网站，我们希望使用纯文本而不是导航栏中的图像。我们使用的字体是Century Gothic（我相信大多数PC和Mac上都可以使用此字体）。问题是，在不同的浏览器上，该字体呈现出明显的差异。在Chrome浏览器中，我们按照自己的方式进行查找，但在Firefox中，文本更小，更粗。

除了编写特定于浏览器的JavaScript来更改字体属性外，还有其他任何选项可以标准化跨浏览器呈现字体的方式。也许一些库或API？也许在声明字体属性时更加具体？老实说，我陷入困境，需要帮助。

website-design fonts cross-browser

— 扎克·莱索比（Zach Lysobey）
source

Answers:

您不会获得字体和其他一些东西来在浏览器之间完全相同地呈现。字体的处理就是一个很好的例子。我知道Windows上的Safari出于某种原因喜欢使文本变为粗体。不幸的是，这是网络的工作方式。浏览器，操作系统，监视器，图形处理器等种类繁多，这意味着一个人可以查看网页的方式有成千上万。因此，在为wbe进行构建时，您必须知道并期望您的网站对每个人都不是完美的。这不是打印。这是狂野的网络。

— 约翰·康德
source

是的，这似乎是不幸的现实。但是，似乎有人可以编写一段JavaScript，使事情更接近规范化。

— Zach Lysobey 2011年

不幸的是，这不是代码问题，而是软件和硬件问题。这是浏览器的开发方式，随着硬件加速的到来，它会变得越来越糟（尽管对于启用了该功能的人来说，字体看起来会更平滑）。

— 约翰·孔德

如果您感到好奇，本文（和同一系列的其他文章）将详细介绍这些问题。blog.typekit.com/2010/12/17/...

— paulmorriss

选择最佳答案。您说这不是代码问题，但是肯定有人可以编写代码，以便将一行文本拉伸到最小宽度（以像素为单位）。那本身将大大改善这种情况。它可以测试渲染的<p>宽度并相应地增加字母间距。也许？

— Zach Lysobey 2011年

@Zach-您可以通过一些计划和智能编码来克服许多障碍。但是最终，我们只能拥有这么多的控制权。基本上，如果您可以接受Windows上的Safari之类的问题，并且可以接受其余代码，则应该很好。

— 约翰·孔德

实际上，有一种在CSS中嵌入字体的方法。它非常容易。有关如何执行此操作的更多信息，请参考http://randsco.com/index.php/2009/07/04/p680。缺点是较旧的浏览器（我认为是pre ei 7和ff 3 ...）不支持此功能。但是使用这些旧浏览器的人数正在迅速减少，并且仍然有可能指定可行的替代字体，并且通常在大多数PC上以防万一。

我没有使用过的另一种方法是使用Flash。除了我所知道的之外，我没有太多其他信息。

— 肯尼斯
source

在css上，请确保仅使用不会被他人盗用的字体，就像在使用css方法时，所有访问您网站的人都可以使用该字体文件一样。

— 肯尼思

该Flash方法称为sIFR。它也有其优点和缺点。

— 约翰·孔德

正如在另一个答案中提到的那样，即使使用这种方法，浏览器和系统之间也会有细微的差别，但是您可以对网站的其余部分做一些事情，这些事情可以弥补并使得网站在所有不同的配置下都能很好地呈现。一个关键的事情是拥有多个浏览器，最好是使用操作系统来测试您的网站。

— 肯尼思

正如其他人已经指出的那样，我们没有完全控制权。但我认为值得一提的是，我发现有一些要点有助于使浏览器在总体上呈现类似的效果。两者都是很多人已经在做的“回归基础”的事情，但是我认为值得一提，因为您所建立的基础通常会为成功或失败做准备。

CSS重置。这个概念很简单，您可以在样式表中设置HTML标签默认值，以设置HTML呈现的通用起点。这是文章和示例：http : //meyerweb.com/eric/tools/css/reset/

Doctype声明。http://htmlhelp.com/tools/validator/doctype.html

— ph33nyx
source