如何使自定义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”。 所有这些变体使字体渲染更好。 但是，作为开发人员，我们无法使用这些属性。

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

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

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

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

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

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

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

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服务的现实通常意味着结果明显变得更糟。 这与浏览器无关。

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

但是，如果您使用的是针对Web使用进行了优化的字体，并且可以自行购买，您可以直接控制字体文件的嵌入， 本文提供了一个很好的提示，可以改进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（ http://cufon.shoqolate.com/generate/ ）。 我已经使用Cufon一段时间了，我发现它是接近你目前正在寻找的结果的最简单，最有效的方法。 如果您还没有遇到过这些解决方案，希望有所帮助。