在网页中使用中文字体（字蛛）与中文字体分享

2019年5月16日 267次阅读 来源: 左蓝

字蛛是一个 WebFont 智能压缩工具，它能自动化分析页面中所使用的 WebFont 并进行按需压缩，通常好几 MB 的中文字体可以被压缩成几 KB 大小。

福利在最后。

字蛛主页：http://font-spider.org

特色：

  • 支持绝大多数的中英文 Truetype 字体
  • 支持开源图标字体库
  • 支持 CSS 伪元素解析，支持 content: “string” 与 content: attr(value) 表达式
  • 支持远程页面解析，并支持资源映射
  • 支持四种样式规则： <style>、<link>、@import 、style=””
  • 支持四种调用方式：命令行、Gulp、Grunt、JS Api
  • 性能、稳定性大幅提高

《在网页中使用中文字体（字蛛）与中文字体分享》 支持图标字体压缩

输入 font-spider 命令，启动字蛛进行字体压缩：

《在网页中使用中文字体（字蛛）与中文字体分享》 自动压缩当前目录的网页字体

压缩中文字体

一般方法是你可以直接安装 Node.js，然后使用 npm 安装字蛛，但是这个过程还需要安装一些编译工具，对于不熟悉命令行或者使用 Windows 的用户来说，这大概不是一个好方法。所以下面提供两种方法使用字蛛，一种是直接安装，另一种是使用已经打包好的字蛛镜像（Docker），通过 docker pull 镜像到本地直接使用。

方法一：直接安装

安装 NodeJS，然后安装字蛛：

npm install font-spider -g

在 CSS 中声明 WebFont：
切换到你写的 css 页面声明字体，方法与 CSS3 的 @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';
}

注意：

  1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成。
  2. 开发阶段请使用相对路径的 CSS 与 WebFont

使用字蛛（路径不要有中文）：

font-spider ./demo/*.html

《在网页中使用中文字体（字蛛）与中文字体分享》 压缩中文字体

方法二：使用 Docker 镜像

拉取镜像：

docker pull zuolan/font-spider

直接使用：

docker run -v /YOUR_HTML_FILES/:/work zuolan/font-spider font-spider /YOUR_HTML_FILES/*

Dockerfile 如下，不知道哪些可以在编译后删除所以暂时镜像还是挺大的，有空梳理一下依赖，去掉无关要紧的软件包。

FROM mhart/alpine-node
USER root
RUN apk add --no-cache python g++ make
RUN npm install -g font-spider
WORKDIR /work
# font-spider /html/*

字体分享

百度云：https://pan.baidu.com/s/1kVSFO3P

字体全部为非商用。

《在网页中使用中文字体（字蛛）与中文字体分享》 我能吞下玻璃而不伤身体

    原文作者：左蓝
    原文地址: https://www.jianshu.com/p/4131471dc3d1
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞