轻量引入好看字体 font-spider 字蛛

最新推荐文章于 2022-09-21 15:40:24 发布

铁头娃

最新推荐文章于 2022-09-21 15:40:24 发布

阅读量349

点赞数

分类专栏：大前端文章标签： css

本文链接：https://blog.csdn.net/lizhencsdn/article/details/109469482

版权

大前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

轻量引入好看字体 font-spider 字蛛

准备

node
npm
font-spider
好看的字体文件 例如 xxxx.ttf

步骤

1、首先通过npm安装font-spider

npm install font-spider -g

2、按如下目录创建demo

demo

|-- demo
    |-- index.html # 需要爬取的字符
    |-- css # 声明 WebFont
    	|-- index.css
    |-- font
   		|-- 好看的字体文件.ttf

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>

<body>
    <!-- span中放需要爬取的字符 -->
    <span class="test">0123456789,</span>
</body>

</html>

index.css

/* 声明 WebFont */
@font-face {
    font-family: '好看的字体文件';
    src: url('../font/好看的字体文件.eot');
    src:
        url('../font/好看的字体文件.eot?#font-spider') format('embedded-opentype'),
        url('../font/好看的字体文件.woff') format('woff'),
        url('../font/好看的字体文件.ttf') format('truetype'),
        url('../font/好看的字体文件.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 使用选择器指定字体 */
.test {
    font-family: '好看的字体文件';
}

/* '好看的字体文件' 替换成自己喜欢的名称 例如 'my-font' */

3、在./demo目录下执行下面的命令

font-spider index.html

命令执行后的目录

|-- demo
    |-- index.html
    |-- css
    	|-- index.css
    |-- font
   		|-- 好看的字体文件.eot # 执行后生成
   		|-- 好看的字体文件.svg # 执行后生成
   		|-- 好看的字体文件.ttf # 执行后生成 新的ttf
   		|-- 好看的字体文件.woff # 执行后生成
   		|-- .font-spider # 执行后生成
   			|-- 好看的字体文件.ttf # 原来的字体备份