Question

我正在将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个以上的答案作为正确答案......

Answer 1

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

-webkit-font-smoothing：[auto |初始|没有|抗锯齿| subpixel-antialiased]

此属性仅适用于Safari和Chrome等webkit浏览器。有关详情，请参阅http://maxvoltar.com/archive/-webkit-font-smoothing。

font-smooth：[auto |永远不会总是| ＆LT;绝对尺寸＆GT; | ＆LT;长度＆GT; ]

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

Answer 2

不幸的是，你无能为力。浏览器没有Photoshop所做的高级消除锯齿设置，您可以将字体平滑模式设置为清晰，平滑或清晰（我喜欢）。您必须使字体更大或更小，并且主要取决于浏览器如何呈现文本。

Answer 3

不幸的是，您通常无法控制浏览器呈现字体的方式。一个新的CSS3属性font-smooth可以提供一些控制权，但不是你想要的那种。

一些替代方案可能是使用手动或服务器端渲染的JavaScript和图像来实现您想要的效果。您也可以使用sIFR（Scripted ¹内联闪存替换）替换一个小的Flash影片剪辑，允许您根据需要对字体进行反锯齿，但Flash几乎无处不在，而且它是不是一个非常有效也不优雅的解决方案。

因此，如果您绝对需要此功能，我建议您使用Photoshop制作透明的PNG，并使用background-image和text-indent: -9999px将图片替换为图片。

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

_{¹这个缩写我可能错了。}

Answer 4

在webkit中，您可以设置：

  -webkit-font-smoothing: none;

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