0

我正在将 Photoshop 图像转换为 HTML，我注意到当我将字体大小设置为 11px 时它会变得模糊，但在 Photoshop 中它看起来仍然很好。

所以在玩了之后我发现如果我将字体类型选项设置为smooth而不是none，Photoshop 也会使字体模糊。

那么，如何使用 CSS 使字体更清晰，以反映 Photoshop 的字体渲染？我使用 Arial 作为我的字体。这是我现在的CSS：

.user_status {
    color: #666666;
    font: Arial;
    font-size: 11px;
    display: block;
    margin-top: 10px;
}

谢谢大家的精彩答案，它对我帮助很大，我希望我能选择超过 1 个答案作为正确答案...

4

4 回答 4

4

大多数浏览器使用系统的字体渲染库，因此大多数字体在不同操作系统上的渲染会略有不同。但是，您可以尝试使用下面列出的 2 个 css3 属性：

-webkit-font-smoothing：[自动| 初始 | 没有 | 抗锯齿 | 亚像素抗锯齿]

此属性仅适用于 webkit 浏览器，例如 Safari 和 Chrome。有关更多信息，请参阅http://maxvoltar.com/archive/-webkit-font-smoothing。

字体平滑：[自动| 从不 | 总是 | <绝对大小> | <长度>]

这是 W3C 的 CSS 字体模块规范的一部分。您可以在http://www.w3.org/TR/WD-font/#font-smooth-prop上查看整个内容。我不确定是否有任何浏览器支持此属性。YMMV。

于 2012-01-07T21:02:12.420 回答
3

不幸的是，您无能为力。浏览器没有 Photoshop 的高级抗锯齿设置，您可以在其中将字体平滑模式设置为锐利、平滑或清晰（我喜欢）。您必须使字体更大或更小，这主要取决于浏览器如何呈现文本。

于 2012-01-07T20:38:45.370 回答
1

不幸的是，您通常无法控制浏览器如何呈现字体。一个新的 CSS3 属性 ,font-smooth可能提供一些控制，但不是您正在寻找的那种。

一些替代方案可能是使用 JavaScript 和图像，手动或服务器端呈现，以实现您想要的效果。您也可以使用 sIFR（Scripted 1 Inline Flash Replacement）来替换一个小的 Flash 影片剪辑，让您可以随心所欲地对字体进行反锯齿处理，但 Flash 几乎不是无处不在，而且它不是一个非常有效或优雅的解决方案.

因此，如果您绝对需要此功能，我建议您使用 Photoshop 制作透明 PNG，然后使用background-image图像text-indent: -9999px替换文本。

您可能要考虑的另一点是，您真的应该使用 11px 的字体大小吗？这很难看，您可能更喜欢简单地选择更大的字体大小。

1我可能对这个首字母缩写词有误。

于 2012-01-07T20:48:15.500 回答
1

在 webkit 中，您可以设置：

  -webkit-font-smoothing: none;

这将近似于您的 Photoshop 抗锯齿：无。

在此处查看演示：http: //jsfiddle.net/jv5W8/

于 2012-01-07T21:02:29.843 回答