在CSS中禁用字体平滑处理是否可行？

Question

我想让一些小字体看起来没有平滑处理。是否可以使用HTML/CSS禁用字体平滑处理？

- German Latorre

---

抱歉直到现在才回复您。不幸的是，在Google Chrome中它对我没有起作用。字体仍然很平滑， :-( 也许是某些依赖于操作系统的问题？ - German Latorre

我更新了我的帖子。你是否阅读了这篇文章http://bashelton.com/2011/03/force-font-smoothing-in-chrome-on-windows-hack/? - Eugene Trofimenko

Answer 1

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

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(for Chrome): 在Windows上强制Chrome字体平滑显示

- Eugene Trofimenko

---

谢谢Eugene，但是你提供的链接讨论了强制平滑，而我想在我的Web应用程序中对某些文本完全不进行平滑处理，:-) - German Latorre

Answer 2

是的，虽然我不能确定哪些浏览器会注意到你！

你可以编写：

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

为了获得您想要的效果。

---

编辑

我确信几个月前我曾使用过这个功能，但我在Mozilla Network上读到：

尽管在CSS3字体的早期（2002年）草案中存在，但“font-smooth”已被从该规范中删除，目前不在标准轨道上。

抱歉！

- Borodin

Answer 3

尝试使用font-smooth: never;。

http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm

- Chase

---

链接现在已经失效了。（我的意思是，现在已经过去了12年，但你知道的！） - BJury

Answer 4

我也在寻找这个。最终我在另一个stackoverflow主题( 如何获得SVG文本的“crispEdges”？ )中找到了解决方案，用于禁用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>

2. 在仅包含文本的HTML元素上添加过滤器。如果它具有背景颜色或其他样式，过滤器将无效。

p {
    filter: url(#crispify);
}

额外内容：您可能希望隐藏SVG元素，因此请将以下内容添加到CSS中。

.offscreen {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

另一件事：如果白色看起来很奇怪，请将颜色更改为黑色，并使用另一个过滤器进行反转，这样您的代码就会变成这样：

p {
  filter: url(#crispify) invert(1);
}

注意，这种效果最适合像像素字体这样设计成锐利的字体。我也不知道这在所有浏览器上是否都有效，但它可以在Chrome、Edge和Firefox上工作。

- nathnolt