17

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

4

4 回答 4

22

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

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 中强制字体平滑

于 2012-05-10T16:44:34.563 回答
5

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

你可以写

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

得到你想要的效果。

编辑

我确定我几个月前就用过这个，但我在 Mozilla 网络上阅读过

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

对不起！

于 2012-05-10T16:41:45.443 回答
3

尝试font-smooth: never;

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

于 2012-05-10T16:41:07.910 回答
0

我也在找这个。我最终在另一个 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>
  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。
于 2021-03-16T14:23:45.130 回答