字蛛 自定义字体

Posted 2020-09-02 觉信

 可能 网站中会用到一些漂亮的文字，又不想用图片，

这样可以用自定义字体，

用的工具是 字蛛http://font-spider.org/

字蛛工具 依赖 nodeJs，

先安装好 NodeJS，然后执行安装字蛛：

npm install font-spider -g


字蛛通过分析本地 CSS 与 html 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

以下都是必须的，字蛛生成的字体是文件中有的文字，
第一步 声明@font-face

   第二步要使用指定的字体 

/*声明 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‘;
}

第三步 在根目录打开命令 shift+右键  选 在此处打开命令行

font-spider D:\Front\...\...\...html

完成！