如何使自定义CSS字体呈现完全像设计

我正在与一些非常出色的设计师合作。在翻译他们的设计时，他们问我为什么有时候我们没有完全按照他们的设计描绘非系统字体。一个非常最近的例子可以连接到这个问题在图像中示出（忽略红色注解）：如何使自定义CSS字体呈现完全像设计

enter image description here

我经由一个JavaScript包括，允许我利用新字体的字体使用从fonts.com - 我的CSS中的家庭。我想提请你注意两件事情：

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

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

我确定字体重量：正常。然而，一些电脑上的东西仍然显得很大胆......而且它看起来会根据您所在的操作系统和浏览器而有所不同。这似乎是我可以用美观的方式修改这些字体重量的唯一方法，就是通过选择字体系列的另一种变体（如斜体或浓缩版本（如果它们存在））。但通常情况下，我仍然无法在所有不同的操作系统和浏览器组合上正确渲染。

你们如何解决这些问题？我可以使用什么技术使字体完全按照设计中的描述进行渲染，而不管操作系统和浏览器是什么？

来源

2013-03-24 John

不像Photoshop等软件的花哨，浏览器并没有使字体渲染的先进方式。一般来说，如果您想要在页面上呈现正常（非粗体）和粗体字体，则应为两者提供字体文件，否则您将无法获得确切的结果。斜体也是如此。如果没有这些额外的文件，浏览器会模拟粗体或斜体，而且它们都会以不同的方式（并且通常很糟糕）。即便如此，也无法让它们在浏览器和操作系统之间看起来相同。 – 2013-03-24 02:45:35

*“，它似乎取决于您所在的操作系统和浏览器”* - 这是您的密钥。所有浏览器都以不同的方式渲染所有字体有些差别很小，不太明显。 – animuson 2013-03-24 02:46:39

Off-top：为什么设计师使用看起来模糊的字体，并使网页上的大部分文字难以阅读？为什么设计师不能使用尺寸小于18点和22像素的字体，看起来很薄，清晰，不模糊，像素宽一点（比如Tahoma，Verdana，Arial等）？为什么设计师在自定义字体中嵌入特殊的图形符号，并且当不允许下载字体时这些符号变成不可打印的矩形？ – 2016-06-16 18:56:18

根据我的经验，我总是发现Web上的字体渲染远不如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/

来源

2013-03-24 02:48:24 span

“的@字体 - 面对CSS at-rule，作者可以指定联机字体来显示文本在他们的网页上。通过允许作者提供他们自己的字体，@ font-face消除了依靠用户在其计算机上安装的有限字体数量的需要。在@字体面的规则不仅可以在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

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

来源

2013-03-24 02:56:21 apaul

此规则是否允许防止字体反锯齿，并允许在任何网页使用userContent.css代替细小，易读和非模糊的字体，同时正确处理字体嵌入的符号不包含在Tahoma，Arial或其他系统字体中？ – 2016-06-16 18:47:15

我们面对你提出了同样的问题，我不会重复这已经被这里所涉及的有用信息。抗锯齿和CSS只是一个图片的一部分。所以我想要让这个字体代工厂和许可如何可以计算到的东西去触摸。

在PC端的web字体服务，如fonts.com和Typekit现实通常意味着结果是noticebly更糟。这与浏览器无关。

当你使用网络字体的服务你在该服务如何处理字体嵌入摆布。

不过，如果您使用的是为网络使用而优化的字体，它是可供购买，您可以直接控制的字体嵌入文件自己，this article has an good tip to improve rendering on Chrome for Windows.

例子代工厂的出售（或谷歌网络字体免费）直接嵌入字体是FontSpring，MyFonts，商业类型等。

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

由于这些并发症，我们通常会考虑早在一个项目个别字体的Web使用的选项。

来源

2013-07-04 04:46:35 jsuissa

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

来源

2015-03-14 04:58:49 pmrutu

如何使自定义CSS字体呈现完全像设计

回答

相关问题