如何获得别名（复古风格）HTML 文本效果

Question

我正在尝试使用 HTML 和 CSS 文本实现锯齿状文本效果。我知道 webkit-font-smoothing 和 font-smooth 属性，但即使将它们设置为“none”和“never”，文本仍然比我想要的更平滑。

是否有其他 css 属性或其他方法可以用来强制文本更加锯齿状/锯齿状？唯一需要注意的是它需要是实际的 HTML 文本，而不是图像。

Answer 1

很多text-shadow都可以近似这样的效果。添加的越多，得到的坏效果就越多：

.box {
  font-size:180px;
  display:inline-block;
  font-weight:bold;
  text-shadow:
    0 0 0px, 
    0 0 0px,
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px;
}

<div class="box">a b</div>
<div class="box" style="text-shadow:none;">a b</div>

Answer 2

您可以使用 SVG 滤镜移除由抗锯齿创建的所有透明度：

.box {
  font-size:180px;
  display:inline-block;
  font-weight:bold;
  filter: url(#remove-alpha);
}
.small .box {
  font-size:20px;
  font-weight:normal;
}

<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 1"></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>
<div class="box">a b</div>
<div class="box" style="filter:none;">a b</div>
<div class="small">
  <div class="box">a b</div>
  <div class="box" style="filter:none;">a b</div>
<div>

但请注意，在高分辨率显示器上，这不会对大文本产生明显的影响。您应该使用从一开始就以这种方式设计的网络字体。

如何获得别名（复古风格）HTML 文本效果

How to get an aliased (retro-style) HTML text effect

html

css

fonts

antialiasing

font-smoothing