View Code? Open in Web Editor
NEW
This project forked from alphawillian/fontspider
CSS 19.90%
JavaScript 61.28%
HTML 18.82%
fontspider's Introduction
痛点：设计图里经常出现代表整个页面风格的特殊字体。
- 使用切图（切图工作量大，且UI图终版之后 产品或业务更改文案 需修改psd文件并再次切图）。
- 使用UI提供的 .ttf 字体文件（文件过大，一般都在 2M以上，多则7~10M,影响页面样式加载）。
- 使用UI提供的原始 .ttf 字体文件生成自己所需的 .ttf 文件。
- 生成的 .ttf 文件能缩小至 5kb~150kb（所需字体数多少 文件大小有差别，字数越多文件越大）。
- 将 font/ 目录下的 myfont.ttf 替换为你自己所需的特殊字体文件，注意：必须是 .ttf 文件。
- 将 html/index.html 文件中
<p></p> 标签中填入你所需转换的文字全集。
2.1 例如你需要文案中包含数字 0~9 你就把 0123456789 填入 <p></p>标签中。
2.2 如还有其他文案就继续往<p></p>标签中添加相应的文字就行了。
2.3 最终生成 .ttf 和 .woff文件时 能自动识别重复的文字。不用自己做文字去重工作。
- 安装依赖
npm install
- 运行
npm run dev 或者 gulp dev
- 查看页面 http://localhost:8888/html/index.html 页面上的效果就是字体样式。
- 运行
npm run build 或者 gulp build
- 将 build/目录下的 .ttf .woff 文件拷贝至自己的项目就可以使用字体文件了。
fontspider's People
Contributors
Stargazers
Watchers
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent