如何使自定义css字体渲染与设计完全一样

Question

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

我通过javascript include使用fonts.com中的字体，这允许我在我的CSS中使用新的font-family。我想提请你注意两件事：

a）在左侧，注意描述文字“努力......”比“Lorem ipsum ......”更大胆。字体是“Droid Serif W01 Italic”。

b）在右边，注意“MEET ONE”比“COMMERZBANK”更大胆。字体系列为“UniversLTW01-57Condense 723821”。

我确定font-weight：normal。然而，在某些计算机上看起来仍然看起来很大胆......而且它似乎取决于你所使用的操作系统和浏览器。似乎我能够以美学上令人愉悦的方式修改这些字体的重量的唯一方法是选择字体系列的另一种变体，如倾斜或浓缩版本（如果它们存在）。但有时候，我仍然无法在所有不同的操作系统和浏览器组合上正确渲染权重。

你们如何解决这些问题？是否有技术可以使字体完全按照设计中的描述进行渲染，无论观众操作系统和浏览器如何？

Answer 1

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

在Photoshop中，设计师可以使用“额外”设置，例如：“Sharp”，“Crisp”，“Smooth”和“Strong”。所有这些变体使字体渲染更好。我们作为开发人员无法使用这些属性。

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

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

对我来说，左图看起来像是经典的反别名问题。正确的图片，我不太确定。它几乎看起来像另一种字体，大小应该足够大，以便正确呈现。

如果您想阅读更多内容，请查看这些链接，希望它们可以提供帮助：

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/

Answer 2

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

它不是一个完美的解决方案，但它可以让你更接近你想要的地方。

Answer 3

我们面临同样的问题，我不会复制已经涵盖的好信息。抗锯齿和CSS只是图片的一部分。所以我想谈谈字体代工厂和许可证如何形成事物。

在PC方面，像fonts.com和Typekit这样的webfont服务的现实通常意味着结果明显变得更糟。这与浏览器无关。

当您使用网络字体服务时，您将受到该服务处理字体嵌入的限制。

但是，如果您使用的是针对网络使用进行了优化的字体，并且可以自行购买，您可以自行直接控制字体文件的嵌入，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类似，因为您不直接托管或嵌入字体。他们达到了前所未有的水平，以解决webfonts的所有常见问题。他们调整了字体粗细的比例，并为各个浏览器定制了部署。与许多其他代工厂一样，限制是，现在你只能购买它们的字体。

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

Answer 4

根据个人经验和高级别研究，我发现使用sIFR（可扩展Inman Flash替换）或纯字javascript替代品（如Typeface（http://typeface.neocracy.org:81/）和Cufon（{{}，您可以接近实现愉快的结果。 3}}）。我已经使用Cufon一段时间了，我发现它是接近你目前正在寻找的结果的最简单，最有效的方法。希望如果您还没有遇到过这些解决方案，那会有所帮助。