【问题标题】:Is it possible to disable font smoothing in CSS?是否可以在 CSS 中禁用字体平滑?
【发布时间】:2012-05-19 07:05:15
【问题描述】:

我希望一些小字体看起来没有平滑。是否可以使用 HTML/CSS 禁用字体平滑?

【问题讨论】:

  • 很抱歉直到现在才提供任何反馈。不幸的是,它在 Google Chrome 中对我不起作用。字体仍然流畅,:-( 可能是一些操作系统相关的问题?
  • 我已经更新了我的帖子。你看过这篇文章bashelton.com/2011/03/… 吗?

标签: html css fonts stylesheet font-smoothing


【解决方案1】:

我也在找这个。我最终在另一个 stackoverflow 线程 (How to get "crispEdges" for SVG text?) 上找到了一个解决方案,可以为 SVG 禁用文本平滑(禁用抗锯齿),但这个解决方案也适用于常规 HTML 元素。

诀窍是使用 SVG 过滤器,然后您可以将其添加到任何 HTML 元素中以使任何内容变脆。

  1. 首先我们需要定义过滤器,以便我们可以在 CSS 中使用它。
<svg class="offscreen" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="crispify">
            <feComponentTransfer>
                <feFuncA type="discrete" tableValues="0 1"/>
            </feComponentTransfer>
        </filter>
    </defs>
</svg>
  1. 将过滤器添加到仅包含文本的 HTML 元素。如果它有背景颜色或其他东西,它就不起作用。
p {
    filter: url(#crispify);
}
  1. 额外内容:您可能希望隐藏 SVG 元素,因此将其添加到 CSS 中。
.offscreen {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
  1. 另一件事:如果白色看起来很奇怪,请将颜色更改为黑色并使用另一个过滤器将其反转,因此您的代码如下所示:
p {
  filter: url(#crispify) invert(1);
}
  1. 注意,这对于设计为清晰的字体(如像素字体)来说是最好的。我也不知道这是否适用于所有浏览器,但它确实适用于 Chrome、Edge 和 Firefox。

【讨论】:

    【解决方案2】:

    是的,这是可能的,但并非适用于所有浏览器。

    font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
    -webkit-font-smoothing : none | subpixel-antialiased | antialiased 
    

    对于您的情况:

    font-smooth: never;
    -webkit-font-smoothing : none;
    

    UPD(适用于 Chrome)Force Font Smoothing in Chrome on Windows

    【讨论】:

    • 感谢 Eugene,但您提供的链接谈到了 force smoothig,我不想对我的网络应用程序中的某些文本进行平滑处理,:-)
    【解决方案3】:

    是的,虽然我不能说哪些浏览器会注意到你!

    你可以写

    <p style="font-smooth:never;">
    

    得到你想要的效果。


    编辑

    我确信我几个月前就使用过这个,但我在 Mozilla 网络上阅读过

    虽然出现在 CSS3 字体的早期(2002 年)草案中,但 font-smooth 已从本规范中删除,目前不在 标准轨道。

    对不起!

    【讨论】:

      【解决方案4】:

      【讨论】:

      • 链接现在已损坏。 (我的意思是 12 年后,但你知道!)
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-01-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-10-15
      相关资源
      最近更新 更多