现代浏览器中外观逼真的90年代字体
我们想做一个看起来像上世纪90年代的网站。听起来很简单对吧？回顾2020年，早期万维网的美学因其缺乏的东西而脱颖而出：没有CSS、表情符号、花哨的网络字体或非网络安全颜色。黑色时代新罗马人在灰色背景上，大概是这样的：
这是简单而朴素的，但它并不真的感觉到复古或怀旧，不是吗？起初，我们甚至不确定缺少什么--我们显然已经生活在21世纪太久了。
但是，当您在运行在Windows 2000虚拟机上的Internet Explorer 5中打开相同的HTML文件时，它看起来完全不同：
看到这一点，又掀起了一股强烈的怀旧浪潮。除了老式的浏览器Chrome和不同的表格默认处理方式之外，文本本身看起来真的很不一样：
抗锯齿是90年代网络缺乏的另一件事，它产生了令人惊讶的巨大差异。即使在21世纪初，当CRT显示器还很普及的时候，苹果和微软的操作系统在字体呈现方面已经做出了根本不同的选择。MacOSX提供平滑、抖动的文本，使用灰色像素的阴影来暗示轮廓，而Windows则遵循强烈暗示的方法，笔划与像素对齐良好，给人一种更清晰、高对比度的感觉。
归根结底，我们没有合理的理由来解释为什么我们决定模仿21世纪初的Windows风格的渲染，但看到Windows虚拟机中的那些旧浏览器与我们产生了最大的共鸣，感受最深。复古。因此，我们决定尝试在现代浏览器中复制这种外观。
太棒了，我们想，我们会用CSS来解决这个问题。2020年的CSS可以做一些令人惊叹的事情，比如渲染矢量图形和动画，所以它肯定会在锯齿形字体上做得很短。但我们的希望很快就被一次网络搜索破灭了。在StackOverflow发布的一页又一页的帖子中，我们发现没有一种通用的方法可以使用CSS禁用抗锯齿功能。这些帖子是由那些想让字体不那么参差不齐的人发布的。有一个非标准的字体平滑属性没有达到CSS3规范的要求，但这并不适用于所有的浏览器，最糟糕的是，结果并没有完全达到目标：像素是可见的，但是分辨率太高了。开发人员经常抱怨为Retina屏幕设计的困难，但我们遇到了相反的问题。
抗锯齿是在操作系统级别设置的，这一点似乎已经很好地解决了，而且不鼓励个别网站在这方面捣乱。这在很大程度上是因为它不利于易访问性，但无论如何，字体平滑属性不是标准的一部分，而且很可能不会在未来出现。这是明智之举。但是，今天制作一个看起来像1996年的网站也不是一个明智的做法，所以我们继续追求像素化印刷的完美。
我们不能让矢量字体看起来像素化，但是我们能不能通过导入正宗的90年代的位图字体文件来解决这个问题呢？我们有一个Windows98磁盘映像，其中包含所有系统字体，包括MS Serif：位图.FON格式的Times New Roman的即兴小品，可以追溯到Windows1.x。不幸的是，我们很快发现css@font-face不能处理.FON文件，而且我们能找到的任何基于Web的字体转换工具都不能将它们转换成@font-face可用的矢量格式。
在搜索转换位图字体文件的工具时，我们遇到了FontForge--一个免费的开源字体编辑器。它看起来功能齐全，并且有大量受支持的格式，所以我们对它能为我们工作持谨慎乐观的态度。
Fontforge可以通过创建位图打击将字体从矢量转换为位图格式。基本上，矢量字体的删除表示其字形已按特定像素大小栅格化。不同大小的栅格化很重要，因为在老式的低分辨率屏幕上，这基本上就是正在发生的事情：呈现文本时，字体会按照特定的像素密度进行栅格化。例如，在75DPI屏幕上，12磅字体变为16像素高。这16个像素足够大，您可以看到它们是锯齿状的边缘。但是，如果您要在同一老式屏幕上显示48磅的文本(例如，大标题)，则会将字体栅格化为64像素，因此看起来会流畅得多。这将会回来，并使我们以后的生活变得复杂。
FontForge能够与其他自由软件协同工作，这些软件可以将像素传达的视觉信息跟踪为点、线和曲线，允许您将位图字体转换回矢量格式。这是很有希望的！
我们制作了一个16px的Times New Roman的位图，它与我们在IE5中看到的是一个像素完美的匹配！
兴高采烈地，我们安装了potrace，并告诉FontForge使用它来跟踪我们像素化版本的Times。
Potrace正在尽最大努力将参差不齐的像素转换成平滑的曲线，结果是一团乱七八糟的东西。
一些进一步的搜索发现了在跟踪之前放大位图字体的想法，以便为potrace提供更高分辨率的输入。在我们的16px位图版本的Times中，我们创建了第二个80px的连拍，所以看起来是一样的，但分辨率提高了5倍。我们屏住呼吸，重复自动跟踪…
我们对这个样子很兴奋，但整个过程都是非常手工的。对于常规的、粗体的和斜体的Times，我们需要这样做，如果我们希望标题看起来像像素一样完美，我们还需要跟踪不同的敲击大小。我们在想，有没有什么方法可以让这一切自动化呢？
理想情况下，即使我们仅限于Times New Roman，我们也希望有Regular、Bold、Italic和Bold Italic字体粗细可用，而且由于我们希望文本在浏览器中的各种大小看起来都很合理，我们还需要创建至少几个不同像素大小的突击。例如，正文文本为16px，但标题也为24px和32px，以便能够以适当的锯齿程度显示它们-不会太少，但也不会太多。如上所述，你不会想要在16px的时候攻击，然后再扩大到标题大小。这就意味着仅这一种字体就有4x3=12种变体。当然，如果我们没有MS Comic Sans和Lucida手写供我们的用户使用，我们是不会满意的。)。这将花费我们几个小时，如果不是几天的话，手动完成。
然而，我们满怀希望，因为FontForge应该是可以使用Python编写脚本的。不幸的是，它并不像用pip install fontforge或类似工具安装的真正的库，您必须通过FontForge或类似的方式调用Python脚本。这对我们来说太难了。似乎对于没有任何空格的字体(因此，都是矢量TTF)，您不能在Python中创建第一个空格。这可能只是我们的误解--不管怎样，界面充其量也就是晦涩难懂。幸运的是，还有一个脚本接口，作者干脆把它称为[作者]想出来的一种遗留语言。对于我们这样的项目来说，这听起来已经够晦涩难懂的了。事实证明，编写FontForge脚本时可用的函数非常类似于在UI中手动执行操作。因此，我们尽职尽责地想出了一个过程来生成一种字体-对一些细节进行注解：
创建所需像素大小为5倍的位图删除(对于16px字体，删除为80px)-FontForge通过最近邻插值自动放大。
调用"；autotrace&34；-在我们的例子中是potrace二进制文件，它从输入位图返回矢量信息。
虽然这听起来很容易，但我们很快就遇到了一些困难。例如，虽然UI允许我们在FontForge中调整敲击的大小，但是在脚本中，步骤3会导致硬段错误。至少可以说，那是相当令人失望的。我们尝试了所有我们能想到的方法，但都不能解决这个错误，正如我们上面所说明的，它对于我们的像素化字体是至关重要的。就在我们认为我们被击败的时候，另一种方法浮出水面：与其尝试在FontForge中做繁重的工作，为什么不包装或修改potrace呢？原来外面已经有人这么做了。我们很快就开始工作，试图将其集成到我们的字体管道中，并最终实现了它的工作！它运行起来很慢，而且很难弄清楚，但这项工作肯定比我们手动查看FontForge UI要好得多。不过，开箱即用的结果相当粗糙。我们不得不应用一大堆小补丁，比如从空格字符中去掉神秘的人工制品，将星号复制到中间圆点的位置，以获得漂亮的密码掩码，还有其他一些事情。但经过多次尝试，在速度和美观上做了很多调整，我们最终得到了你现在在这个网站上看到的字体(请务必查看主页生成器向导®以获取更多信息！)。至少，假设你已经启用了网页字体，并且正在使用Chrome或Safari-我们仍然有点依赖于过时的字体平滑CSS属性来让事情变得像像素一样完美。
如果您想了解有关字体的更多信息，这里有一些我们感兴趣的链接：
弗雷迪·威瑟登(Freddie Witherden)著的“关于强调自由软件的字体光栅化的论文”。这是一本引人入胜的读物，深入介绍了字体渲染的惊人细节。
版权所有©2020 Vistaserv.net♥在墨尔本精心建造。隐私政策|联系我们|$捐赠$
