在网页上使用Windows 95字体

Question

以下是 Windows 95 截图所使用的字体以及如何在 CSS3 中引用它（不平滑字母边缘）的方法？

- kukis

Answer 1

我终于成功将Windows 95的Sans Serif字体转换为True Type字体。您可以在此处下载：MS Sans Serif，MS Sans Serif Bold。

- Lev Leontev

---

谢谢，这正是我所需要的。如果有人感兴趣，我还发现了一种重用相同字体来加粗文本的方法，例如弹出窗口标题：text-shadow: 0.5px 0px white, 1.5px 0px white; color: transparent; letter-spacing: 1px;诀窍在于，Windows 95 的粗体字体实际上并不是粗体字体，它只是将细字母叠放在彼此之上，偏移了1像素。 - jgosar

太好了！你是如何转换字体的？你是找到了自动化的方法，还是一个字母一个字母地手动转换的？我想为 Latin 1 变量（代码页 1252）做同样的事情，这样我就可以使用德语变音符号。 - aaronk6

嘿@aaronk6，我实际上也转换了其他字符集，在FontForge中完成的。现在要编辑答案。 - Lev Leontev

@LeoLeontev，很酷，谢谢！只是想知道：你是否能在浏览器中以原始大小渲染出无抗锯齿效果？我尝试过，但在 macOS 和 Linux 上都会出现抗锯齿。 - aaronk6

@aaronk6 我不是网站开发专家，建议你使用谷歌搜索来找到关闭 AA 的方法 :) - Lev Leontev

@LeoLeontev 我尝试过，但是没有适用于这种特殊情况的方法 :( 不过我找到了另一种转换字体的方法。我正在撰写一篇文章。 - aaronk6

Answer 2

字体是“MS Sans Serif”或者“Microsoft MS Sans Serif”。

- sharp

---

很抱歉，但这并不是真的。在CSS3中应用这些字体不会产生与图像相同的输出。 - kukis

MS Sans Serif是一种比例间距点阵字体，最初在Windows 1.x中称为“Helv”。自Windows 3.1开始更名为其当前名称。它是Windows 3.1、Windows 95、Windows NT 4.0、Windows 98和Windows ME上的默认系统字体。它与终端、Fixedsys和System等字体共享位置... - sharp

这可能是真的，但问题明确要求如何在现代浏览器中使用它来产生与Windows 95相同的外观。应用此字体会导致文本看起来像是“平滑”的MS Sans Serif（因此不是真实的）。 - kukis

尝试使用这个... PS_Sans_Nouveaux http://www.dafont.com/px-sans-nouveaux.font - sharp

@FiN 谢谢，那个非常接近！ - Chris Sandvik

Answer 3

以下是一种非常有效的方法。这些都是实际浏览器截图：

第一张截图来自于Linux上的Firefox，而第二张来自于macOS上的Firefox。在Linux上，字体渲染实际上是完美的像素级别，而macOS则添加了轻微的反锯齿。您可能希望右键单击上面的图像并在单独的选项卡中打开它以查看其原始大小以查看差异。

在macOS上获取像素级别的渲染的解决方法是在元素上以80px的大小绘制字体，然后将画布元素缩小到其大小的10％。这将导致在macOS上获得像素级别的渲染： 我是一名有用的助手，可以进行文本翻译。

从.fon文件创建Web字体的步骤

以下是我将原始的Microsoft字体（称为sserife.fon）转换为上面屏幕截图中使用的Web字体（woff2格式）所做的操作。

先决条件

需要以下工具：

• woff2
• PSF工具
• FontForge
• ImageMagick

如果您使用的是macOS，则可以按照以下方式安装它们：

（第二行是非画布方法。）

brew install woff2 psftools imagemagick
brew install --cask fontforge

.fon转.png格式

首先，我们需要提取.fon文件。值得注意的是，.fon文件是一个容器，可以包含多个不同大小的光栅字体。

$ fon2fnts sserife.fon
sserife.fon: 6 fonts extracted
$ ls -1A
MS Sans Serif_10.fnt
MS Sans Serif_12.fnt
MS Sans Serif_14.fnt
MS Sans Serif_18.fnt
MS Sans Serif_24.fnt
MS Sans Serif_8.fnt
sserife.fon

很好！因此，MS Sans Serif存在8pt、10pt、12pt、14pt、18pt和24pt的大小。这些数字可能让你想起旧日的日子。

我不会将它们全部转换，而是只使用最小的8pt，因为这是Windows 95中的默认大小。

我首先将它们转换为PSF格式，然后再转换为XBM格式（一种旧的位图图形格式），最后转换为PNG格式。

$ fnt2psf MS\ Sans\ Serif_8.fnt MS\ Sans\ Serif_8.psf
Warning: Variable-width!
$ psf2xbm MS\ Sans\ Serif_8.psf MS\ Sans\ Serif_8.xbm
$ convert MS\ Sans\ Serif_8.xbm MS\ Sans\ Serif_8.png

结果如下所示：

您会注意到，我使用了字体的Latin 1变种（代码页1252）。

除了PNG文件外，您还需要一个只包含图像中所有字符的文本字符串。

使用带有FontForge的Python脚本，我们可以打印原始文件中可用的所有ASCII字符。

将以下脚本存储在名为 script.py 的文件中（或任何其他您喜欢的名称）。

import os
from fontforge import *

font = open(os.sys.argv[1])
count = 0
for g in font:
        if count % 32 == 0: print()
        try:
                print(chr(font[g].unicode), end='')
        except:
                print(" ", end='')
        count += 1

运行脚本：

/Applications/FontForge.app/Contents/MacOS/FontForge -script script.py MS\ Sans\ Serif_8.fnt

（这里假设使用的是 macOS。如果是 Windows 或 Linux 系统，请相应调整 FontForge 路径。）

结果：

PKGBASE: /Applications/FontForge.app
Copyright (c) 2000-2020. See AUTHORS for Contributors.
 License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
 with many parts BSD <http://fontforge.org/license.html>. Please read LICENSE.
 Version: 20201107
 Based on sources from 2020-11-07 20:56 UTC-ML-D-GDK3.
 Based on source from git with hash: 21ad4a18fb3d4becfe566d8215eba4483b0ddc4b

 !"#$%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
`abcdefghijklmnopqrstuvwxyz{|}~
€ ‚ƒ„…†‡ˆ‰Š‹Œ Ž  ‘’“”•–—˜™š›œ žŸ
 ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß
àáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

复制从Based on source from git with hash: 21ad4a18fb3d4becfe566d8215eba4483b0ddc4b之后的代码块到剪贴板中。请确保包括第一行为空的行！

TTF字体创建

现在我们将生成的PNG文件上传到一个专门用于创建像素字体的TrueType字体的在线工具。

请前往：https://yal.cc/r/20/pixelfont/

请注意，此工具也有离线版本可用，位于https://yellowafterlife.itch.io/pixelfont。

1. 上传上面生成的PNG图像
2. 将上一节中的代码块粘贴到“Glyphs in image”部分
3. 根据下面的截图设置瓦片宽度、偏移量、分隔符、基线和间距

现在它应该看起来像这样：

点击“保存TTF”

TTF转WOFF转换

生成的TTF文件在某些浏览器中无法使用。例如，Firefox对TTF文件很挑剔。因此，我们将TTF文件转换为WOFF2文件。

$ woff2_compress MS\ Sans\ Serif\ 8pt.ttf

嵌入字体

使用以下CSS：

@font-face {
   font-family: 'sserife_8';
   src: url('MS Sans Serif 8pt.woff2') format('woff2');
}

body {
   font-family: 'sserife_8';
   font-size: 8px;
}

注意事项

字距调整

为了达到100%的像素完美，还需要处理一件事情：字距调整。

在进行所有这些工作时，我发现尽管原始字体是一种旧的光栅字体，但它似乎具有字距信息。这意味着当例如键入Microsoft时，在大写字母M和i之间插入了一个1像素的间隙。

上面使用的像素字体转换器实际上通过指定字距对支持此功能。我使用了以下字距对，它肯定是不完整甚至不正确的，但对我解决了一些烦人的情况。

. abcdefghijklmnopqrstuvwxz 1
B abcdefghijklmnopqrstuvwxz 1
D abcdefghijklmnopqrstuvwxzJ 1
E abcdefghijklmnopqrstuvwxz 1
G abcdefghijklmnopqrstuvwxz 1
H abcdefghijklmnopqrstuvwxz 1
I abcdefghijklmnopqrstuvwxz 1
J abcdefghijklmnopqrstuvwxz 1
M abcdefghijklmnopqrstuvwxz 1
N abcdefghijklmnopqrstuvwxz 1
O abcdefghijklmnopqrstuvwxz 1
Q abcdefghijklmnopqrstuvwxz 1
R abcdefghijklmnopqrstuvwxz 1
S abcdefghijklmnopqrstuvwxz 1
T abcdefghijklmnopqrstuvwxz 1
U abcdefghijklmnopqrstuvwxz 1
X abcdefghijklmnopqrstuvwxz 1
Z abcdefghijklmnopqrstuvwxz 1
: 0123456789 1
1 0123456789. 1
2 1. 1
3 1. 1
4 1. 1
5 1. 1
6 1. 1
7 1. 1
8 1. 1
9 1. 1
0 1. 1
. . 1

如果有人知道如何从原始字体确定正确的字距对，请告诉我。非常感谢。

抗锯齿

如上所述，macOS仍然对像素字体应用一些轻微的抗锯齿。为了规避这个问题，请使用以下脚本：

<style>
    #text {
        width: 400px;
        height: 20px;
    }

    #text canvas {
        width: 100%;
        height: 100%;
    } 
</style>

<canvas id="myCanvas" width="4000" height="200"></canvas>

<script>
    window.setTimeout(function () {

        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "80px 'sserife_8'";
        ctx.fillStyle = "#000000";
        ctx.fillText("Arbeitsplatz www.example.com Microsoft Internet Explorer öüä€ßgy", 0, 120);
    }, 500);

</script>

（setTimeout函数是一种等待网络字体加载的笨拙方法。在网络连接缓慢的情况下，这种方法会失败。不要在生产环境中使用！） 图像中的第一行是使用画布方法呈现的。

但是，根据您想要实现的目标，这可能不是可行的方法。

- aaronk6

---

我很感激你的努力。我希望它对一些读者有用。我已经继续前进了，就像5年前一样 ;) - kukis

没关系，这对我的项目很有用，我只是想与世界分享。我真的没有想到在这么长的时间后它会对你特别有用 :-) - aaronk6