如何使用字蛛

乌托邦脑洞
3,356 阅读5分钟

学习如何使用字蛛，请直接阅读第三章

一、了解字体

1.标准字体：

Windows

微软雅黑体：Microsoft YaHei

黑体：SimHei

宋体：SimSun

新宋体：NSimSun

仿宋：FangSong

楷体：KaiTi

MacOS

冬青黑体：Hiragino Sans GB

华文黑体：STHeiti

华文细黑：STHeiti Light

华文宋体：STSong

华文仿宋：STFangsong

华文楷体：STKaiti

由于系统原因，部分字体可能无法正确显示

可以看出，这些字体还是比较常规的。

如果我们需要在项目使用特殊一点的字体，该怎么办呢？

答案就是使用第三方字体。

2.第三方字体

使用第三方字体，以 dafont 上的 Pokemon 字体为例

字体名称

下载并解压后得到

字体格式

上图所示，为两个 .ttf 字体格式的文件。

包括 .ttf 在内，还有其他多种字体格式：

  • TrueType (.ttf)

Windows 和 Mac 系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

  • OpenType (.otf)

OpenType 是一种可缩放字型（scalable font）电脑字体类型，采用 PostScript格式，是美国微软公司与Adobe 公司联合开发，用来替代 TrueType 字型的新字型。这类字体的文件扩展名为.otf，类型代码是 OTTO。

  • Embedded Open Type (.eot)

嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染。这些文件只在当前页活动的状态下，临时安装在用户的系统中。

  • Web Open Font Format (.woff)

相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（ Metadata ），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。

这么多字体带来的问题是浏览器的支持：目前现代浏览器基本都支持 .ttf 、 .otf 、 .woff 的字体格式。但需要注意的是 IE8以下仅支持 .eot 格式。

第三方字体已经有了，那么要如何在web项目中使用呢？

二、使用字体

1.了解 @font-face

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}

@font-face 是一个CSS的 @规则，它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式， @font-face 可以消除对用户电脑字体的依赖。

font-family 所指定的字体名字将会被用于 font 或 font-family 属性。

src 远程字体文件位置的URL或者用户计算机上的字体名称，可以使用local语法通过名称指定用户的本地计算机上的字体。 如果找不到该字体，将会尝试其他来源，直到找到它。

2.使用 @font-face

  • 新建项目 font-face ，目录结构如下

项目实例

  • 在 font 目录下，放入字体文件

  • 编辑 index.css

@font-face {
  font-family: 'PokemonHollow';
  src: url('../font/Pokemon\ Hollow.ttf');
}

@font-face {
  font-family: 'PokemonSolid';
  src: url('../font/Pokemon\ Solid.ttf');
}

div {
  font-size: 50px;
  text-align: center;
}

.p1 {
  font-family: 'PokemonHollow';
}

.p2 {
  font-family: 'PokemonSolid';
}
  • 编辑 index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./assets/style/index.css">
  <title>Document</title>
</head>
<body>
  <div>stay hungry stay foolish</div>
  <div class="p1">stay hungry stay foolish</div>
  <div class="p2">stay hungry stay foolish</div>
</body>
</html>
  • 在浏览器中打开 index.html

项目效果

现在我已经学会如何使用自定义字体了

吗？

很遗憾，并没有。

为什么？

因为我们博大精深的中华文化，造就了庞大的中文字库，引入一个完整的中文字库，会占用大量资源，降低页面性能，影响用户体验。

那么，就没有既能使用炫酷的字体，又能保证页面性能的方法吗？

有，当然有！

那你倒是说啊！！

font-spider 字蛛！！！

三、字蛛

1.了解字蛛

字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。

字蛛官网

特性

  • 压缩字体：智能删除没有被使用的字形数据，大幅度减少字体体积

  • 生成字体：支持 woff2、woff、eot、svg 字体格式生成

2.使用字蛛

  • 安装字蛛
npm install font-spider -g

  • 下载中文字体，以汉仪新蒂芳草体为例

  • 在 static 目录下，放入 .ttf 字体文件

  • 在 static 目录下，新建 font.css

  • 在根目录下，新建 font.html

  • 编辑 font.css

@font-face {
  font-family: 'HanyiSentyMeadow';
  src: url('../font/HanyiSentyMeadow.eot');
  src:
    url('../font/HanyiSentyMeadow.eot?#font-spider') format('embedded-opentype'),
    url('../font/HanyiSentyMeadow.woff2') format('woff2'),
    url('../font/HanyiSentyMeadow.woff') format('woff'),
    url('../font/HanyiSentyMeadow.ttf') format('truetype'),
    url('../font/HanyiSentyMeadow.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

li {
  font-family: 'HanyiSentyMeadow';
}

特别说明： @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成

  • 编辑 font.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./static/style/font.css">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>芝加哥公牛</li>
    <li>克里夫兰骑士</li>
    <li>底特律活塞</li>
    <li>印第安纳步行者</li>
    <li>密尔沃基雄鹿</li>
  </ul>
</body>
</html>
  • 执行字蛛
font-spider ./font.html
  • 得到压缩后的字体文件

执行结果

  • 在需要改变字体的地方，使用前文 二、使用字体 - 2.使用 @font-face 中的方法即可

至此，字蛛的使用方法就介绍完毕，感谢阅读，希望对你有所帮助。

开源中文字库

avatar
文章
阅读
粉丝