html - 如何获得别名（复古风格）的 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>

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