一、安装font-spider

  npm install font-spider -g

二、目录结构

  font-spider

    font

      FZZZHONGHJW.ttf

    font.html

三、font.html内容

<!DOCTYPE html>
<html>
<head>
<title>方正正中黑简体</title>
<meta charset="utf-8">
<style type="text/css">
@font-face {
font-family: 'FZZZHONGHJW';
src:
url('font/FZZZHONGHJW.eot?#font-spider') format('embedded-opentype'),
url('font/FZZZHONGHJW.woff') format('woff'),
url('font/FZZZHONGHJW.ttf') format('truetype'),
url('font/FZZZHONGHJW.svg') format('svg');
  }
p{
font-family: "FZZZHONGHJW";
}
</style>
</head>
<body> <!-- 全局 -->
<p>班级情况 布置作业 教学资源</p> </body>
</html>

四、从字体文件中把页面字体抓取,生成字体文件,执行命令:

  font-spider font.html

五、生成后的目录结构  

  font-spider

    font

      .font-spider

        FZZZHONGHJW.ttf      

      FZZZHONGHJW.eot

      FZZZHONGHJW.svg

      FZZZHONGHJW.ttf

      FZZZHONGHJW.woff

    font.html

用 字蛛 取出需要的字符应用字体 @font-face的更多相关文章

  1. 字蛛(font-spider)-单独压缩字体(解决页面少有的特殊字体的字体包引用)

    特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字 ...

  2. 中文WebFont解决方案Font-Spider(字蛛)

    我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...

  3. 字蛛fontSpider的使用

    字蛛官方文档 http://font-spider.org/index.html 首先安装全局包  npm install font-spider -g 然后下载字体 ,本次需要的是  "造 ...

  4. fontSpider字蛛,好用的字体压缩工具教程

    一直觉得很多字体特别好看,但是那些好看的字体只能做在图片上不能用CSS样式去实现,作为一个会设计的前端,真心觉得很烦恼,有时候那些文字需要更换,修改起来非常麻烦,要到处去找源文件,找不到源文件还要尽力 ...

  5. 精简TTF字体、FontPruner、汉字字体瘦身(非字蛛)

    20190726更新 标黄部分 网上比应用比较多的 字蛛 http://font-spider.org/ 本文使用了本机安装软件,得到瘦身后的 TTF 字体文件 准备工具: python : 我使用是 ...

  6. 编码对象或者字串中包含Unicode字符怎样转换为中文

    In [18]: c = '你好' In [20]: d = c.encode('unicode_escape') In [21]: d Out[21]: b'\\u4f60\\u597d' In [ ...

  7. ASP清除字串中的重复字符

    <% Function Test(str) dim intLen,i,strTemp,aryTest intLen = Len(str) strTemp = "" aryTe ...

  8. 字蛛webfont 安装及使用方法

    先安装nodejs和git,比如放在D:/nodejs/  文件夹 cmd 进入该文件夹,安装npm install express 安装 npm install font-spider -g 安装  ...

  9. css 字间距离_css 字体字符间距设置

    介绍下css 字间距,使用css来控制字与字之间距离,也叫css字间距方法. 使用到的css样式属性单词text-indent抬头距离,letter-spacing字与字间距. Css字间距.div ...

随机推荐

  1. 波哥!一个不安分的IT男

    第一篇博文,紧张,窃喜,辣眼睛! 这个订阅号主要是写给自己的,近期越来越发现记忆力不如以前了! 时光如梭,岁月荏苒,或许这两句经典的开头文比较契合自己的年纪.依稀记得几年前还在组装服务器.搬机柜.做系 ...

  2. e.Row.RowType == DataControlRowType.DataRow详解(转)

    代码语句如下: protected void OnRowCreate(object sender, GridViewRowEventArgs e)    {        if (e.Row.RowT ...

  3. ESSENTIALS OF PROGRAMMING LANGUAGES (THIRD EDITION) :编程语言的本质 —— (一)

    # Foreword> # 序 This book brings you face-to-face with the most fundamental idea in computer prog ...

  4. iOS Programming UIGestureRecognizer and UIMenuController

    iOS  Programming  UIGestureRecognizer and UIMenuController A UIGestureRecognizer intercepts touches ...

  5. [翻译] API测试最佳实践 - 组织你的测试

    组织你的测试 适用级别:初学者 在最底层,一个测试步骤(Test Step)用来验证一个单独的操作.组合若干测试步骤到测试用例,允许你验证那些被分隔出来的一个一个的功能,这些功能是应用程序所需要的.接 ...

  6. 怎么学好XXX

    怎么学好数据库是一个比较大题目,数据库不仅仅是写SQL那么简单,即使知道了SQL怎么写,还需要很清楚的知道这条SQL他大概扫描了多少数据,返回多少数据,是否需要创建索引.至于SQL优化是一个比较专业的 ...

  7. Java MVC框架性能比较

    Java MVC框架性能比较 - by zvane 现在各种MVC框架很多,各框架的优缺点网络上也有很多的参考文章,但介绍各框架性能方面差别的文章却不多,本人在项目开发中,感觉到采用了struts2框 ...

  8. Regular Expression Flavors

    Perl https://perldoc.perl.org/perlre.html PCRE http://www.pcre.org/current/doc/html/pcre2syntax.html ...

  9. 原生 js 整理

    常见的事件 window.event     代表着,事件的状态,只有在事件的过程中才有效.

  10. http 1.0 http 1.1 http 2.0的区别

    HTTP/1.0 版的主要缺点是,每个TCP连接只能发送一个请求.发送数据完毕,连接就关闭,如果还要请求其他资源,就必须再新建一个连接. http1.1优点: 1.HTTP 1.1 版引入了持久连接( ...