如何使字体在浏览器中看起来很旧且过时

Posted 2023-04-17

【中文标题】如何使字体在浏览器中看起来很旧且过时

【英文标题】：How to make a font looking very old and out-washed in the browser

【发布时间】：2015-04-23 20:55:03

【问题描述】：

我想创建一个普通字体的随机冲洗字母。假设我想要 http://www.fontspace.com/category/washed%20out 那些字体，但我使用的是在浏览器中被洗掉的常用字体。

这可能吗？我的意思是采用一种已经洗掉的字体，相同的字母总是以相同的方式显示。

我真的很想拥有相同的字母，但看起来都有些不同。也许好像我会自己手写一样。

【问题讨论】：

this 与多个分层渐变的组合可能是您想要的。但坦率地说，你在吹毛求疵，我很怀疑这很重要。

Mhh 只是在 Chrome 中工作，是的，在其中并不是真正随机的东西，只是改变了颜色。不过还是谢谢。

你可以用渐变创建复杂的图案，我敢肯定它不再只是 Webkit（文章来自 2012）

好吧，我测试了它，只在 Chrome 中工作。

您是否删除了 -webkit- 供应商前缀？或者为-moz-、-ms- 等添加供应商前缀规则？因为正如它所写的那样，它明确地只针对 WebKit。

【参考方案1】：

您可以使用透明的 png 图像在文本上叠加喷溅效果。这只是一个示例：

h1 
font-family: Arial, sans-serif;  
font-size: 3em;
  text-transform: uppercase;
  position: relative;

h1:after 
  content: '';
  background-image: url(http://i665.photobucket.com/albums/vv11/Acetonium/splatmask.png);
  background-size: 100% 100%;
  background-position: -250px 35px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity:  0.9;
  pointer-events: none;

<h1>This a header</h1>

【讨论】：

我添加了pointer-events: none 使与覆盖层的交互变得不可能（因此选择、复制、右键单击等不会损坏）

非常感谢，但我也不满意。图片 我有 500 个文本路径，它们都可以有多种颜色的背景。如果我采用您的解决方案，我会看到到处都是白点。我需要一个真正只针对文本而不是背景的解决方案。你的想法能做到吗？

【参考方案2】：

没有真正令人满意的解决方案。

使用图像是在背景中而不是在文本中使用图像。所以整个背景都散发出图像的光芒。 任何其他方式都是浏览器不兼容或看起来很糟糕，甚至占用了很多资源

唯一的方法是使用现有的手写字体。事实上，这还不是你能拥有的最糟糕的事情。