村农

莫笑农家腊酒浑,丰年留客足鸡豚。


个性化html web中文字体的几个解决方案

转载

中文三大家网络公司都有提供字体子集化的服务。所谓字体子集化就是简化字体,将不需要的字从字库剔除,提取仅需要的文字另存为新的字体文件,字体当然就小了。

腾讯:font-spider
百度:font-min
阿里巴巴:icon-font font-carrier

以上三家各有优劣,其中腾讯的font-spider的优化核心是用的百度的font-min,从使用方便、功能适用,推荐腾讯的font-spider。

font-spider官方介绍:字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。

现在我们来演示一下如何使用font-spider,下面的例子用的是windows操作系统进行操作。

安装好了node.js之后,用win+R运行cmd,在命令提示符中输入以下代码,安装font-spider。

npm install font-spider -g

假设我在c:\web文件夹里面有3个文件,一个css文件,一个html文件,以及一个全字库的字体文件(放在font文件夹里面)。下面是CSS文件的代码:

  /*使用选择器指定字体*/

 @font-face {      font-family: '汉仪晴空体W';      src: url('font/HYQingKongTiJ.eot');      src: url('font/HYQingKongTiJ.eot?#font-spider') format('embedded-opentype'), url('font/HYQingKongTiJ.woff') format('woff'), url('font/HYQingKongTiJ.ttf') format('truetype'), url('font/HYQingKongTiJ.svg') format('svg');      font-weight: normal;      font-style: normal;  }  h1 {      font-family: '汉仪晴空体W';  }

这里是html代码

<!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css.css"></head><body>
    <h1>新架构 全栈设计</h1></body></html>

在cmd窗口上输入:

C:\web>font-spider index.html

稍微运算一下,已经生成字体成功就如下图所示:

2.jpg

而原来字体文件已经存放在:.font-spider文件夹里面。

运行网页文件如下图所示:



作者:凉风有兴
链接:https://www.jianshu.com/p/6cf02ae8e190
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。