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

Question

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

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

标签： htmlcssfontsantialiasingfont-smoothing

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>