开源字体包缩减font-spider
最近公司产品用微软雅黑,被告~ 领导要求产品后台系统必须更换字体,美工给了个宋体,个人觉得太丑,就网上搜了些处理方法使用
CSS属性 @font-face 自定义字体, 最后决定用 思源黑体 (思源黑体是Adobe与Google宣布推出的一款开源字体,详细内容自行百度,.ttf文件font-spider 的github上有提供下载地址)。
思源黑体中文字体包竟然有10几M 页面加载速度太慢,所以就百度解决方案,搜到了字蛛 font-spider ,很好用的一款开源工具。
给个友情链接: http://font-spider.org/ 网站和 github上有使用方法和代码。
记录下自己的使用过程以便以后回忆:
1: 安装 node.js; (我自己机器本身就安装过,之前有简单的玩过node)
2:npm install font-spider -g PS: 本机是Win7, 也有可能本机环境问题,需要安装一个font依赖包 以及python(记得配置环境变量).
3: 接下来根据网站的步骤的本地新建css文件、html文件 ,而我们系统是jsp文件 需要转,正好 我们系统做过国际化,所有系统所需要的文字 全部在资源文件当中,然后新建一个html文件 将
资源文件中所有的汉字全部拷贝进去,哈哈 就是这么省事。
4: 最后命令行 运行 font-spider test.html , 大功告成, 字体文件只有100多KB,作为后台管理系统完全可以了。
上一下最后成功的图片,哈哈OK了,结束。
PS: 不过只是自己玩了玩,最后还是没用到系统里,我觉得如果静态页面用还是很不错的,但是因为系统后台有很多新增数据,很多字体肯定没打包到里面的,到时候会有部分字体显示不同,有点尴尬,但是我觉得慢慢更新字体包也何尝不可,多改几次BUG,很快就丰富了,个人理解。
不过以后做静态网站什么的还是用的到的,写个博客做个记录,以便以后回忆。
开源字体包缩减font-spider的更多相关文章
- app 要求字体使用楷体,使用字体包
1,下载字体包 http://www.3987.com/xiazai/6/fonts/36616.html#down 2. studio中src\main\创建assets\fonts,存放 ...
- 《隆重介绍 思源黑体:一款Pan-CJK 开源字体》
关于思源黑体 思源黑体是谷歌与 Adobe 联合开发,支持简体中文.繁体中文.日文.韩文以及英文:支持 ExtraLight.Light.Normal.Regular.Medium.Bold 和 He ...
- ubuntu单独安装字体包
查看当前字体的命令: fc-list 文泉驿字体下载地址: http://wenq.org/wqy2/index.cgi?ZenHei#v0_8 下载到的是一个deb安装包 在下载完字体以后将字体包拷 ...
- Java运用第三方开源jar包sigar.jar获取服务器信息
通过使用第三方开源jar包sigar.jar我们可以获得本地的信息 一.准备工作 (1)下载jar包和相关文件 资源链接:百度云:链接:https://pan.baidu.com/s/1nxccJHJ ...
- AngularCli项目中添加字体图标(Font)详解
本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...
- 字蛛(font-spider)-单独压缩字体(解决页面少有的特殊字体的字体包引用)
特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字 ...
- vue 引入第三方字体包
1.创建 style_css 文件夹,在当前文件夹下 新建 index.css 和 引入字体包. 2. 在build 目录下,设置 webpack.base.cong.js , 在module ...
- css 文本外观属性(text) 和 字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...
- 开源字体不香吗?五款 GitHub 上的爆红字体任君选
作者:HelloGitHub-ChungZH 在编程时,用一个你喜欢的字体可以大大提高效率,越看越舒服.这篇文章就推荐 5 个在 GitHub 上优秀的字体供大家选择吧! 1. Iosevka 网站: ...
随机推荐
- web测试方面的知识
web测试 软件测试体系架构设计 一.体系架构 1.C/S:客户端+服务器端,如QQ.单机版记事本.office等,所用语言:VB.C++.C.C#.JAVA.PB.D…等数组语言,C和S都是自己测, ...
- C#面向对象的三大特征
一,封装:我们可以把世界上任何一个东西都看作为一个对象,那么我们这里以人为例,一个人就肯定是一个对象了.那么封装是什么呢?封装就是这个人要完成一件事情,他所需要的任何工具都带在了自己的身上,所需要的技 ...
- PHP 获取时间的各种处理方式!
今天写下php中,如何通过各种方法 获取当前系统时间.时间戳,并备注各种格式的含义,可灵活变通.1.获取当前时间方法date()很简单,这就是获取时间的方法,格式为:date($format, $ti ...
- uva 10047 the monocyle (四维bfs)
算法指南白书 维护一个四维数组,走一步更新一步 #include<cstdio> #include<cstring> #include<queue> #includ ...
- [学习笔记]设计模式之Abstract Factory
写在前面 为方便读者,本文已添加至索引: 设计模式 学习笔记索引 在上篇笔记Builder设计模式中,时の魔导士祭出了自己的WorldCreator.尽管它因此能创造出一个有山有树有房子的世界,但是白 ...
- 循环中continue和break的区别
continue是指跳出本次循环 进入下次循环 再来一次 break是指循环结束 再也不来了 可以用一个广告来解释这个区别 这是continue 房:Hi 郭:是你啊 房:我订的书到了吗 房:啊!对了 ...
- 利用UI_APPEARANCE统一设置UITabBarItem样式
-(void)setupTabBarItemAttributes{ //attributes NSMutableDictionary *selectedAttrs= [NSMutableDiction ...
- 在C#中如何确定一个文件是不是文本文件,以及如何确定一个文件的类型
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在C#中如何确定一个文件是不是文本文件,以及如何确定一个文件的类型.
- 【转】android Camera 中添加一种场景模式
http://blog.csdn.net/fulinwsuafcie/article/details/8833652 首先,来了解一下什么是场景模式. 最简单的方法当然是google了,这里有一篇文章 ...
- maven search
开放的一些maven search 1:官方 http://search.maven.org/ 2:http://maven.ozacc.com/ 3:http://mvnrepository.com ...