html - 字体小于 11px 时开始变得模糊

标签 html css font-smoothing

我正在将 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/

相关文章:

javascript - 单击更改 CSS,然后在下次单击时再次更改

css - 字体平滑技术?文本阴影在 Chrome 14.0.833.0 或更高版本中呈现不同

intellij-idea - linux中的Intellij IDEA字体平滑

javascript - 带有 iframe 的下拉菜单不起作用

javascript - 在容器内显示的 CSS 幻灯片。如何?

HTML 复选框 CSS : Cursor default or pointer?

html - 查询和背景图像的 css 层次结构

html - 背景大小 : contain

加载到页脚时 Javascript 文件不起作用

xcode - 在Mountain Lion中禁用Xcode 4.4中的抗锯齿字体