如何使自定义 css 字体呈现完全像设计答案

【问题标题】：How to make custom css fonts render exactly like designs如何使自定义 css 字体呈现完全像设计
【发布时间】：2013-03-13 17:43:53
【问题描述】：

我正在与一些非常出色的设计师合作。在翻译他们的设计时，他们问我为什么有时我们不完全按照他们的设计中描述的那样渲染非系统字体。附在此问题的图片中可以显示一个最近的示例（忽略红色注释）：

我通过 javascript include 使用来自 fonts.com 的字体，它允许我在我的 css 中使用新的字体系列。我想提请您注意两件事：

a) 请注意左侧的描述文本“In an effort to ...”比“Lorem ipsum ...”粗得多。字体为“Droid Serif W01 Italic”。

b) 在右侧，请注意“MEET ONE”比“COMMERZBANK”粗得多。字体系列为“UniversLTW01-57Condense 723821”。

我确定字体粗细：正常。然而，在某些计算机上，事情仍然看起来很大胆……而且它似乎因您使用的操作系统和浏览器而异。似乎我可以以美观的方式修改这些字体的重量的唯一方法是选择字体系列的另一种变体，例如倾斜或压缩版本（如果存在）。但很多时候，我仍然无法在所有不同的操作系统和浏览器组合上正确呈现。

你们如何解决这些问题？无论查看器的操作系统和浏览器如何，我都可以使用哪些技术来使字体完全按照设计中描绘的方式呈现？

【问题讨论】：

与 Photoshop 等花哨的软件不同，浏览器没有高级的字体渲染方法。一般来说，如果您想要在页面上呈现普通（非粗体）和粗体字体，您应该为两者提供字体文件，否则您将无法获得准确的结果。斜体与否也是如此。如果没有这些额外的文件，浏览器会模拟粗体或斜体，并且它们的表现都不同（而且通常很糟糕）即使这样，也无法让它们在浏览器和操作系统中看起来相同。
“它似乎因您使用的操作系统和浏览器而异” - 这是你的钥匙。所有浏览器都以不同的方式呈现所有字体。有些差异很小，以至于并不明显。
离题：为什么设计师使用看起来很模糊的字体，使网页上的大多数文本很难阅读？为什么设计师不能使用小于 18 点和 22 像素的字体，看起来细、清晰、不模糊和 1 像素宽（如 Tahoma、Verdana、Arial 等）？为什么设计师会在他们的自定义字体中嵌入特殊的图形符号，而当不允许下载字体时，这些符号会变成不可打印的矩形？

标签： css fonts

【解决方案1】：

根据我的经验，我总是发现 Web 上的字体渲染远不如 Photoshop 或其他设计工具中的那么好。这通常会导致这样的问题。

在 Photoshop 中，设计师可以使用“额外”设置，例如：“锐利”、“清脆”、“平滑”和“强”。所有这些变体使字体渲染更好。但是，我们作为开发人员无法使用这些属性。

这一切都归结为所有浏览器以不同方式实现的字体的抗锯齿。让字体在所有浏览器中以相同的方式呈现是不可能的。这是仅使用专为网络创建的字体的原因，因为它们旨在在最常见尺寸的屏幕上具有良好的抗锯齿效果。

不过，您可以尝试一些技巧。我对他们几乎没有经验，但希望我的背景答案和这些链接能给您灵感，让您在哪里可以找到有关这个复杂问题的更多信息。

对我来说，左图看起来像是一个经典的抗锯齿问题。正确的图片，我不太确定。它几乎看起来像另一种字体，大小应该足够大才能正确呈现。

如果您想了解更多信息，请查看这些链接，希望它们对您有所帮助：

Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?

How to do font antialiasing in web page?

Webfont Smoothing and Antialiasing in Firefox and Opera

http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

【讨论】：

【解决方案2】：

“@font-face CSS at-rule 允许作者指定在线字体以在其网页上显示文本。通过允许作者提供自己的字体，@font-face 消除了依赖于有限数量的字体用户已经安装在他们的计算机上。@font-face at-rule 不仅可以用在 CSS 的顶层，还可以在任何 CSS 条件组 at-rule 中使用。 -MDN

    @font-face {
    [font-family: <family-name>;]?
    [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
    [unicode-range: <urange>#;]?
    [font-variant: <font-variant>;]?
    [font-feature-settings: normal|<feature-tag-value>#;]?
    [font-stretch: <font-stretch>;]?
    [font-weight: <weight>];
    [font-style: <style>];
    }

https://developer.mozilla.org/en-US/docs/CSS/@font-face

这不是一个完美的解决方案，但它可能会让你更接近你想去的地方。

【讨论】：

此规则是否允许防止字体抗锯齿，并允许在任何网页上使用 userContent.css 使用细、清晰和不模糊的字体，同时正确处理字体嵌入符号，不包含在 Tahoma、Arial 或其他系统字体中？

【解决方案3】：

我们面临您提出的相同问题，我不会重复这里已经介绍的好信息。抗锯齿和 CSS 只是图片的一部分。所以我想谈谈字体代工厂和许可是如何影响事物的。

在 PC 端，fonts.com 和Typekit 等网络字体服务的现实通常意味着结果明显更差。这与浏览器无关。

当您使用网络字体服务时，您将受到该服务如何处理字体嵌入的摆布。

但是，如果您使用的是针对网络使用进行了优化的字体并且可以购买，您可以直接控制字体文件的嵌入，this article has an good tip to improve rendering on Chrome for Windows.

销售（或免费的 Google Webfonts）用于直接嵌入的字体的代工厂示例有 FontSpring、MyFonts、Commercial Type 等。

Hoefler Type 刚刚推出了他们自己的字体服务，在 PC 上呈现精美。在您不直接托管或嵌入字体的意义上，它类似于 fonts.com 和 Typekit。他们已经达到了前所未有的水平来解决网络字体的所有常见问题。他们调整了字体粗细的比例，并为各个浏览器定制了部署。限制是，与许多其他代工厂一样，到目前为止，您只能购买他们的字体。

由于这些复杂性，我们通常会在项目的早期考虑在网络上使用单个字体的选项。

【讨论】：

【解决方案4】：

根据个人经验和高级研究，我发现使用 sIFR（Scalable Inman Flash Replacement）或纯 JavaScript 替代品（如 Typeface (http://typeface.neocracy.org:81/) 和 Cufon (http://cufon.shoqolate.com/generate/)）可以接近获得令人愉悦的结果.我使用 Cufon 已经有一段时间了，我发现它是接近您目前正在寻找的结果的最简单和最有效的方法。如果您还没有遇到这些解决方案，希望对您有所帮助。

【讨论】：