Web引用中文个性字体

nemo 发布于2019-08-30 14:13 / 2288人阅读

摘要：最近在前端开发时，因为设计的原因，要引用一些特殊字体格式，但是后来发现这些字体文件非常大，平均每个要左右，严重影响了网页效率。

最近在前端开发时，因为设计的原因，要引用一些特殊字体（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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115865.html

Web引用中文个性字体

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

EdwardUp 2019-08-02 16:01 评论0 收藏0
博客引入漂亮字体二三事

摘要：火狐推迟对字体的支持，重点放在格式上。网络字体的效率字体文件的体积可能非常的大尤其是对于汉字，而且需要额外的连接，这些都会降低网站页面的加载速度。最近兴致上来，就想更换了那Blog标题字体(汉字的)；网上搜索了一番，发现蘇新詩柳繁體这款甚合我心；然后就着手搞将了起来，分分钟也算是替换了；但，这仅仅是此次折腾的开始；这就细细道来作为学习笔记记载。原文首发链接http://www.je...

Pocher 2019-08-19 17:37 评论0 收藏0
博客引入漂亮字体二三事

摘要：火狐推迟对字体的支持，重点放在格式上。网络字体的效率字体文件的体积可能非常的大尤其是对于汉字，而且需要额外的连接，这些都会降低网站页面的加载速度。最近兴致上来，就想更换了那Blog标题字体(汉字的)；网上搜索了一番，发现蘇新詩柳繁體这款甚合我心；然后就着手搞将了起来，分分钟也算是替换了；但，这仅仅是此次折腾的开始；这就细细道来作为学习笔记记载。原文首发链接http://www.je...

Michael_Lin 2019-08-30 12:47 评论0 收藏0
PDF文件预览项目选型

摘要：文件预览项目选型文件在线预览有多种方式，目前使用较多的有种。中文支持较好，没有乱码问题。在线示例中文文档可以将转换成，并且可以在中精确显示原生文本包括在中的字体颜色位置，可以选择搜索复制等，可选单文件输出。缺点文件过大可能会出现浏览器卡死。 PDF文件预览项目选型 PDF文件在线预览有多种方式，目前使用较多的有3种：pdf2swf、pdf2image、pdf2html。这3种方式各有优...

Scott 2019-08-14 15:16 评论0 收藏0