7

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

在此处输入图像描述

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

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

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

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

大家是怎么解决这些问题的呢？无论查看者的操作系统和浏览器如何，我是否可以使用一些技术来使字体完全按照设计中的描述呈现？

4

4 回答 4

6

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

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

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

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

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

如果您想阅读更多内容，请查看这些链接，希望它们对您有所帮助：

CSS 是否支持文本抗锯齿，例如“清晰、锐利等”？

如何在网页中进行字体抗锯齿？

Firefox 和 Opera 中的 Webfont 平滑和抗锯齿

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

于 2013-03-24T02:48:24.340 回答
2

“@font-face CSS 规则允许作者指定在线字体以在其网页上显示文本。通过允许作者提供自己的字体，@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

它不是一个完美的解决方案，但它可能会让您更接近您想要的位置。

于 2013-03-24T02:56:21.530 回答
1

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

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

当您使用 webfonts 服务时，您将受到该服务如何处理字体嵌入的支配。

但是，如果您使用的是针对 Web 使用进行了优化的字体并且可以购买，您可以在其中直接控制字体文件的嵌入，这篇文章有一个很好的技巧来改进 Chrome for Windows 上的渲染。

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

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

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

于 2013-07-04T04:46:35.613 回答
1

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

于 2015-03-14T04:58:49.817 回答