45. web字体和图标

1. web字体

要了解字体图标，首先需要弄明白什么是 web 字体。

它能解决的问题：用户电脑上没有安装相应字体，强制让用户下载该字体。

如何解决问题：

  1. 提前准备好字体文件
  2. 使用 @font-face 指令制作一个新字体

示例：

先准备好字体文件：

45. web字体和图标 - 图1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="./css/index.css">
  8.     <title>web字体</title>
  9. </head>
  10. <body>
  11.     <p>
  12.         认识你自己！真相是，生命不在当下时刻之外。——李尔纳
  13.     </p>
  14. </body>
  15. </html>
/* 制作一个新的字体，名称叫做 good night */
@font-face {
    /* 此时 font-family 用于定义引入的字体的名称。
    也就是给引入的字体取个名字，后续通过该名称使用即可。 */
    font-family: "good night";
    /* 通过 src 属性 引入准备好的字体文件 */
    src: url("../font/晚安体.ttf");
}

p {
    font-family: "good night";
}

展示效果：45. web字体和图标 - 图2

补充：由于不同的浏览器所能支持的字体格式是不一样的，所以，我们为了取得更好的兼容性，对于同一款字体，我们一般要准备多个文件，以此来兼容不同的浏览器。

由于这个字体，用户电脑上很可能是没有安装的，所以，需要下载该字体，而下载的过程是需要一定时间的，虽然很短暂，但是，我们强制刷新页面后，还是可以看到“闪烁”效果的。

补充：什么是强制刷新？

就是网页浏览后，一般会在本地留下缓存，普通刷新的话，浏览器会优先获取缓存里的资源代替从服务器上请求，以提高访问速度。强制刷新就是告诉浏览器不要获取缓存，重新从服务器请求网页上的所有资源，适用于开发测试或者某些资源更新。

如何强制刷新：

  • 方法1：Ctrl + Shift + R
  • 方法2：Shift + F5

虽然，有很多web字体展示效果很nice，但是，字体文件还是有点大的，这就意味着，用户下载这些资源需要的时间会更长，从而影响用户体验，因此，我们很少会在实际开发中使用web字体。

2. 字体图标

以前我们如果想要在页面中引入一些小图标的话，那么只能使用图片。但是，由于web字体出现了，我们就可以将很多常见的图标，做成字体文件的格式，来引入到我们的页面中。相对于web字体文件来说，字体图标文件的大小会小很多，而且相对于之前引入图片的做法而言的话，文件大小应该也是小很多的。所以，我们不需要担心引入它而导致用户下载缓慢，体验差的问题。

字体图标库：

有3种引入方式

  • Font class（线上）
  • Symbol（线下）
  • Unicode（CSS）

具体用法：回看视频（12min ~ ）

注意：

如果后期又引入了新的字体图标，需要更新，并且会新生成一个链接地址，原来的地址要替换为新的才好使。

最佳实践：开发阶段使用在线的，发布时再使用离线的。