网络字体的使用流程与原理✨

_花卷
VIP.3 渐入佳境
929 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

1、认识Web字体

如果我们想使用某一字体，可以通过font-family去设置

  • 我们可以提供一个或多个字体种类名称，设置给font-family，此时浏览器会在列表中搜寻，直到找到所运行的系统上可用的字体为止
  • 但是对于开发人员来说，字体选择比较有限，有时我们需要完成一些定制化的需求，让网站更加美观，引入系统中不存在的字体怎么办呢？
  • 此时我们就要使用Web Fonts（网络字体）

2、Web Fonts（网络字体）的工作原理

  1. 首先我们要通过一些渠道获取到希望使用的字体（不需要开发来做）：

    • 对于某些收费的字体，需要获取到对应的授权
    • 对于定制的字体，需要设计人员来设计
    • 对于免费的字体，需要获取到对应的字体文件

  2. 前端开发人员在CSS中使用字体

  3. 在部署静态资源时，将HTML、CSS、JS、以及Font资源一同部署在服务器上

这样，当用户去访问网页时：

  • 由于代码中有引入字体文件，所以字体文件此时会被一同下载下来
  • 浏览器会根据使用的字体在下载的字体文件中去查找、解析，并使用对应的字体

3、Web Fonts（网络字体）的使用过程

比如，我们去字体天下这个网站选择一款免费的字体进行下载

  • 下载下来一个zip压缩包，解压后会得到一个.ttf后缀的字体文件
  • 此时我们可以将该字体文件放入项目中的fonts文件夹中
  • 我们需要通过@font-face去定义需要引用的字体并使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 将这个字体引入到网页中 */
    @font-face {
      font-family: "qll";
      src: url("./fonts/XiaoDouDaoHuaXinFeng.ttf");
    }

    .box {
      font-family: "qll";
    }
  </style>
</head>
<body>
  
  <div class="box">我是内容</div>

</body>
</html>

4、Web Fonts网络字体的兼容性

上面使用过程的例子中我们下载下来的字体是.ttf后缀的字体文件，它是True Type字体

  • 在实际开发中，某些浏览器可能不支持该字体，所以为了浏览器的兼容性问题，我们需要对应其他格式的字体

  • 所以为了让浏览器去兼容的显示该字体，我们一般会提供多个字体文件，主要包括以下常见字体：

    • OpenType / TrueType字体：扩展名是.ttf、.otf，建立在True Type字体之上
    • Embedded OpenType字体：扩展名是.eot，OpenType字体的压缩版
    • SVG字体：扩展名是.svg、.svgz
    • WOFF（表示Web Open Font Format开放字体）字体：扩展名是.woff，建立在TrueType字体上

不同浏览器对不同字体文件的兼容性如下：

如果我们想要具备很强的兼容性，在定义@font-face的时候就要按照以下方式来书写：

@font-face {
  font-family: "qll";
  src: url("./fonts02/AaQingHuanYuanTi.eot"); /* IE9 */
  src: url("./fonts02/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts02/AaQingHuanYuanTi.woff") format("woff"), /* chrome、firefox */
    url("./fonts02/AaQingHuanYuanTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url("./fonts02/AaQingHuanYuanTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
  font-style: normal;
  font-weight: 400;
}

这是Paul Irish早起的一篇文章中所描述的方式，被称为“刀枪不入的@font-face写法”。

src用于指定字体文件资源，其中：

  • url用于指定资源的路径
  • format用于帮助浏览器来快速识别字体的格式，增加效率

5、认识字体图标

字体可以设计为各种各样的形状，当然也可以将字体设计成图标的样子，这就是字体图标。

字体图标有以下几点好处：

  • 放大不会失真
  • 可以任意切换颜色（因为可以设置字体的color）
  • 相比使用图片来说，所占空间较小

6、字体图标的使用过程

在实际开发过程中，我们一般会去阿里矢量图标库去下载想用的图标，然后放入到项目中使用。

  1. 选择想使用的图标添加至购物车

  1. 选择下载代码

  1. 解压下载的压缩包，我们会发现包含以下内容

  1. 我们可以在项目的fonts文件中放入“iconfont.ttf”字体文件，然后使用
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      @font-face {
        font-family: "iconfont";
        src: url("./fonts/iconfont.ttf");
      }
      
      .iconfont {
        font-family: "iconfont";
        /* 由于字体本身可能会倾斜，所以要设置为normal让其展示正常 */
        font-style: normal;
      }
    </style>
  </head>
  <body>
    
    <!-- 直接通过内容(字符实体) -->
    <i class="iconfont">&#xe654;</i>
    <i class="iconfont">&#xe664;</i>
  </body>
</html>
  • 通过@font-face定义需要引入的字体文件
  • 定义一个iconfont类，给该类名指定使用对应的字体
  • 一般使用i元素来显示对应的字体图标
  • 每个字体图标都有对应的字符实体，我们可以通过解压后的文件夹中的“demo_index.html”文件查看

除了以上使用字符实体的方式外，还可以通过给指定类名添加::before伪元素来添加对应的字符实体内容，此时我们就可以使用压缩包中提供的“iconfont.css”文件了：

  • 可见该文件已经为我们配置好了iconfont
  • 我们一般会直接将iconfont.css一同放入fonts文件夹中，然后通过link引入后直接使用：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
      .icon-31gouwuche {
        font-size: 20px;
        color: orange;
      }
    </style>
  </head>
  <body>

    <i class="iconfont icon-31gouwuche"></i>

  </body>
</html>

（PS：阿里字体图标库为我们提供的字体文件只有.ttf后缀的文件，可见大部分浏览器现已兼容了ttf后缀的文件，如果还需要不同后缀的字体文件去兼容其他浏览器，可以生成后通过兼容写法去引入～）

avatar
文章
阅读
粉丝