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

如题所述

举报该问题

其他回答

第1个回答 2024-09-18

1、认识Web字体

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

我们可以提供一个或多个字体种类名称，设置给font-family，此时浏览器会在列表中搜寻，直到找到所运行的系统上可用的字体为止

但是对于开发人员来说，字体选择比较有限，有时我们需要完成一些定制化的需求，让网站更加美观，引入系统中不存在的字体怎么办呢？

此时我们就要使用WebFonts（网络字体）

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

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

对于某些收费的字体，需要获取到对应的授权

对于定制的字体，需要设计人员来设计

对于免费的字体，需要获取到对应的字体文件

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

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

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

由于代码中有引入字体文件，所以字体文件此时会被一同下载下来

浏览器会根据使用的字体在下载的字体文件中去查找、解析，并使用对应的字体

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

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

下载下来一个zip压缩包，解压后会得到一个.ttf后缀的字体文件

此时我们可以将该字体文件放入项目中的fonts文件夹中

我们需要通过@font-face去定义需要引用的字体并使用

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass="box">我是内容</div></body></html>

4、WebFonts网络字体的兼容性

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

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

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

OpenType/TrueType字体：扩展名是.ttf、.otf，建立在TrueType字体之上

EmbeddedOpenType字体：扩展名是.eot，OpenType字体的压缩版

SVG字体：扩展名是.svg、.svgz

WOFF（表示WebOpenFontFormat开放字体）字体：扩展名是.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,iOS4.2+*/url("./fonts02/AaQingHuanYuanTi.svg#uxfonteditor")format("svg");/*iOS4.1-*/font-style:normal;font-weight:400;}

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

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

url用于指定资源的路径

format用于帮助浏览器来快速识别字体的格式，增加效率

5、认识字体图标

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

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

放大不会失真

可以任意切换颜色（因为可以设置字体的color）

相比使用图片来说，所占空间较小

6、字体图标的使用过程

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

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

选择下载代码

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

我们可以在项目的fonts文件中放入“iconfont.ttf”字体文件，然后使用

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><iclass="iconfont"></i><iclass="iconfont"></i></body></html>

通过@font-face定义需要引入的字体文件

定义一个iconfont类，给该类名指定使用对应的字体

一般使用i元素来显示对应的字体图标

每个字体图标都有对应的字符实体，我们可以通过解压后的文件夹中的“demo_index.html”文件查看

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

可见该文件已经为我们配置好了iconfont

我们一般会直接将iconfont.css一同放入fonts文件夹中，然后通过link引入后直接使用：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="./fonts/iconfont.css"><style>.icon-31gouwuche{font-size:20px;color:orange;}</style></head><body><iclass="iconfonticon-31gouwuche"></i></body></html>

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

原文：https://juejin.cn/post/7104090236841361444