我正在将 Photoshop 图像转换为 HTML,我注意到当我将字体大小设置为 11px 时它变得模糊,但在 Photoshop 中它看起来仍然很好。
所以在尝试之后我发现,如果我将字体类型选项设置为 smooth
而不是 none
,Photoshop 也会使字体模糊。
那么,我怎样才能使用 CSS 使字体更清晰,以便它反射(reflect) Photoshop 的字体渲染?我使用 Arial 作为我的字体。这是我现在的 CSS:
.user_status {
color: #666666;
font: Arial;
font-size: 11px;
display: block;
margin-top: 10px;
}
谢谢大家的精彩回答,这对我帮助很大,我希望我能选择超过 1 个答案作为正确答案...
最佳答案
大多数浏览器使用系统的字体渲染库,因此大多数字体在不同操作系统上的渲染会略有不同。但是,您可以尝试使用下面列出的 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。
关于html - 字体小于 11px 时开始变得模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8772911/