问如何使自定义css字体呈现与设计完全相同的效果

EN

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

在Photoshop中，设计师可以使用“额外”设置，比如：“锐化”、“清晰”、“平滑”和“强健”。所有这些变体都使字体呈现得更好。但是，作为开发人员，这些属性对我们是不可用的。

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

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

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

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

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/

“@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

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

我们面临着您提出的相同问题，我不会重复这里已经涵盖的好信息。反走样和CSS只是图片的一部分。所以我想谈一谈字体铸造厂和许可证是如何融入其中的。

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

当你使用webfonts服务时，你要看该服务如何处理字体嵌入。

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

直接嵌入字体的代工厂例子有FontSpring、MyFonts、商用字体等。

Hoefler Type刚刚推出了他们自己的字体服务，在PC上呈现得非常漂亮。它类似于fonts.com和Typekit，因为您不直接托管或嵌入字体。他们已经达到了前所未有的水平来解决所有常见的webfonts问题。他们调整了字体粗细的比例，并为单独的浏览器定制了部署。限制是，像许多其他铸造厂一样，到目前为止，你只能购买他们的字体。

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