Web引用中文个性字体

最近在前端开发时，因为设计的原因，要引用一些特殊字体（otf格式），但是后来发现这些字体文件非常大，平均每个要8mb左右，严重影响了网页效率。经过一番搜索，发现了前端字体压缩工具（只支持utf-8格式）font-spider.

font-spider介绍

具体介绍可以查看，http://font-spider.org/index....

安装

先安装好 NodeJS，然后执行：npm install font-spider -g

使用

/*声明 WebFont*/
@font-face {font-family: 'pinghei';src: url('../font/pinghei.eot');src:url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),url('../font/pinghei.woff') format('woff'),url('../font/pinghei.ttf') format('truetype'),url('../font/pinghei.svg') format('svg');font-weight: normal;font-style: normal;
}/*使用选择器指定字体*/
.home h1, .demo > .test {font-family: 'pinghei';
}

@font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
所以，一定要有ttf格式字体，如果是其他类型的，可以在线转换https://www.fontke.com/tool/c...

生成字体

运行 font-spider ./demo/*.html命令

然后就能发现，压缩好的字体都很小，只有几k

Web引用中文个性字体相关推荐

css 中文文字字体_使用CSS的网络字体
css 中文文字字体 CSS | 网络字体 (CSS | Web fonts) Web fonts allow people to use fonts that are not pre-install ...
[zabbix]解决binlog日志过大/web界面中文乱码问题
转载来源: [zabbix]解决binlog日志过大/web界面中文乱码问题 : https://www.jianshu.com/p/44cace796206 记录之前在跑项目过程中遇到的一次binl ...
Simple-TODO: 一个简易的 todo 程序 - web.py 中文教程
为什么要写这个教程呢?非常多的新手问同样的问题,很烦恼.我并不打算写得大而全,我只想写一个简单的入门级的,解决新手的烦恼,其他知识你需要看官方文档.我写了一个简单的 todo 程序,供新手学习和参考. ...
html5 字体位置,html5字体样式移动 html5 中文什么字体
网页字体样式华文黑体:STHeiti 网页字体样式华文楷体:STKaiti 网页字体样式华文宋体:STSong 网页字体样式华文仿宋:STFangsong 网页字体样式黑体:SimHei 网页字体样式 ...
在网页中使用个性字体
在一般的网页设计中,网页中的字体都是使用font-family这个CSS属性,但是一般默认的微软雅黑.宋体等种种默认字体都是比较规范但稍显死板的字体.如果想在自己的网页中使用比较个性的字体,应该怎么做 ...
Linux下使用中文、字体、版
月20日 Unicode BOM 发现网上某广为流传的中文帖子将Unicode字节流的标识字节(BOM, byte order mark)弄错了,正确的应该是: 00 00 FE FF UTF-32, ...
BIZTALK项目中WEB引用WEBSERVICES服务时候报错
近期工作中须要完毕通过BIZTALK完毕调用WEBLOGIC公布的WebServices服务,环境搭建好后,打开VS开发工具新建一个BIZTALK项目,加入WEB引用将对方公布的地址拷贝上去,能够正常 ...
VS添加服务引用和 Web引用的区别
参考: http://blog.csdn.net/szstephenzhou/article/details/7834669 http://book.2cto.com/201304/20441.htm ...
为什么添加Web引用后，客户端就能远程调用WebService了？
前言好多人会写WebService也会远程调用WebService,调用前必须先添加WebReferences才行,可有多少人知道为什么添加引用后就能访问了呢?肯定有人会说只要能调用就行了,不必关心 ...

Web引用中文个性字体

font-spider介绍

安装

使用

生成字体

Web引用中文个性字体相关推荐

最新文章

热门文章