font-spider使用中的注意事项

原创已于 2023-03-30 13:12:01 修改 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2023-03-30 13:09:15 首次发布

文章讲述了如何使用font-spider（或font-spider-plus）工具将字体转换为HTML可识别的格式，特别是处理TTF文件。用户需创建HTML文件包含所需文本，然后通过命令行运行font-spider。虽然font-spider不支持OTF格式，但可以借助FontCreator等软件先将OTF转为TTF。转换成功后，源字体和提取后的字体将分别保存在不同文件夹中。

1、font-spider只能转html格式文件（现在好像有font-spider-plus了，不知道是不是支持格式更多）

2、执行命令安装： npm install font-spider -g

3、建一个html文件把所有要转的信息全放进去，然后执行font-spider index.html（注意文件路径别错了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'myfont';
            src: url('./SourceHanSansCN-Regular.ttf');
        }

        .text {
            font-family: 'myfont';
            font-size: 40px;
        }
    </style>
</head>
<body>

<div class="text">
<span>
把所有要转的文字放在这里
</span>
</div>

4、好像不能转otf格式的字体，我转otf文件时报错，提示什么dirname错误，把otf文件转成ttf文件后就可以正常运行了，

5、转换成功后会在执行目录生成一个名为“.font-spider”的文件夹，这个文件夹里存放的是源字体文件，原来字体文件的位置存放的是转换提取后的字体文件

6、otf转ttf,试了几个在线otf转ttf的都不行，转出来都只有几kb，后来还是下载了一个叫FontCreater的软件才转成功的