在网页上使用Windows 95字体

Question

下面的Windows95截图使用什么字体，如何在CSS3中引用它(不平滑字母的边缘)？

​

Answer 1

我终于成功地将Windows95 Sans Serif字体转换为True Type字体。你可以在这里下载：MS Sans Serif，MS Sans Serif Bold。

​

​

Answer 2

字体为"MS Sans Serif“或"Microsoft MS Sans Serif”

Answer 3

这里有一种工作得很好的方法。以下是实际的浏览器屏幕截图：

​

​

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

在macOS上获得像素完美渲染的一个变通办法是在<canvas>元素上以80px绘制字体，然后将画布元素缩小到其大小的10%。这将在macOS上产生像素完美的渲染效果：

(第二行是非画布方法。)

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

以下是我将原始微软字体(名为sserife.fon)转换为上面截图中使用的web字体(woff2格式)所做的工作。

先决条件

这需要以下工具：

• woff2
• PSF Tools
• 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

结果如下所示：

​

​

您将注意到，我使用了该字体的拉丁文1变体(代码页1252)。

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

使用Python脚本和FontForge，我们可以打印原始文件中所有可用的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. 将上一节中的块粘贴到“图像中的字形”部分
3. 根据

下方的屏幕截图设置切片宽度、偏移、分隔、基线和间距

​

​

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

​

​

点击“保存TTF”

TTF到WOFF的转换

生成的TTF文件不能在所有浏览器中工作。例如，当涉及到TTF文件时，Firefox是挑剔的。因此，我们将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之间插入一个1px的间隙。

上面使用的Pixel字体转换器实际上通过指定字距对来支持这一点。我使用了以下肯定不完整甚至不正确的代码，但为我修复了一些恼人的情况。

. 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函数是一个老生常谈的问题，为什么要等到web字体加载后才执行。这将在互联网连接速度较慢的情况下失败。不要在生产中使用！)

使用画布方法渲染图像中的第一行。

但是，这可能不是一种可行的方法，这取决于您想要用它来实现什么。