轻量引入好看字体 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 # 原来的字体备份

其他

字蛛API
字蛛官网

轻量引入好看字体 font-spider 字蛛相关推荐

中文字体压缩器——字蛛
网站多处使用中文特殊字体,而导入字体文件随便十几M,做成图片又不好维护,介绍一个简单实用的字体压缩工具. 中文字体压缩器--字蛛 css font-face 引入中文字体必备神器字蛛通过分析本地 C ...
vue使用ttf字体包压缩字蛛 font-spider
1.可以先建一个文件夹里面包括 2.1>.css文件夹->index.css 2>.font(里面放的是ttf字体包) 3>.index.html 引入 4> ...
字体文件压缩——字蛛(FontSpider)
简介字蛛(FontSpider) 是一个中文字体压缩器: 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器 ...
导入的java文件不显示文字_java 引入自定义字体font后出现的硬盘吃光的问题
有个需求要用美术字体在图片上写字用自定义的文字有两个方法: Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream in ...
Pure一款轻量简洁好看的Typecho主题
简介: 这是一款移植 Gridea For Pure 的 Typecho 主题这个是来自友人夏目贵志的精心开发,在这款主题的开发过程中本博主有幸目睹了全博客的开发历程,由几个按钮到现在发布GitH ...
html如何调用特殊字体,怎样在页面中引入特殊字体呢？
让网页自由引入中文字体成为可能,可能有人会说直接引入字体包,在样式中设置font-family:"XXX"不就好了吗?超级简单呢.. 那我们一起看看字体包的大小(该实例中使用:喜鹊 ...
字蛛压缩ttf字体（前端常用）
!!!压缩的只有调用字体的文字字蛛压缩后有些文字不起作用字蛛在压缩过程中只将调用字体的文字进行压缩,其他文字将不被压缩 1.准备在页面中引用字体 <html><head> ...
字蛛（FontSpider，中文字体压缩器）网页自由引入中文字体
之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...
【ttf 压缩】html网页引用中文字体，文件过大，加载缓慢的解决办法【字蛛】【web font】
[以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...
js 实现轻量ps_简单轻量的池实现
js 实现轻量ps 对象池是包含指定数量的对象的容器. 从池中获取对象时,在将对象放回之前,该对象在池中不可用. 池中的对象具有生命周期:创建,验证,销毁等.池有助于更好地管理可用资源. 有许多使用示 ...

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

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

准备

步骤

其他

轻量引入好看字体 font-spider 字蛛相关推荐

最新文章

热门文章

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

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

准备

步骤

其他

轻量引入 好看字体 font-spider 字蛛相关推荐

最新文章

热门文章

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

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

轻量引入好看字体 font-spider 字蛛相关推荐