我希望一些小字体看起来没有平滑。 是否可以使用 HTML/CSS 禁用字体平滑?
是的,这是可能的,但并非适用于所有浏览器。
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(适用于铬(:在 Windows 上的 Chrome 中强制平滑字体
是的,虽然我不能说哪些浏览器会注意到你!
你可以写
<p style="font-smooth:never;">
以获得您想要的效果。
编辑
我确定我几个月前用过这个,但我在 Mozilla 网络上阅读
虽然出现在CSS3字体的早期(2002年(草稿中,但font-smooth具有 已从此规范中删除,当前不在 标准轨道。
不好意思!
尝试font-smooth: never;
http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
我也在寻找这个。我最终在另一个堆栈溢出线程上找到了一个解决方案(如何为 SVG 文本获取"crispEdges"?(来禁用 SVG 的文本平滑(禁用抗锯齿(,但此解决方案也适用于常规 HTML 元素。
诀窍是使用SVG过滤器,然后您可以将其添加到任何HTML元素中以使任何内容变得清晰。
- 首先,我们需要定义过滤器,以便我们可以在 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>
- 将筛选器添加到仅包含文本的 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。