HTML + CSS 连载 | 41 - 网络字体

最新推荐文章于 2025-03-26 19:48:03 发布

Riemann Hypothesis

最新推荐文章于 2025-03-26 19:48:03 发布

阅读量345

点赞数

分类专栏： HTML2CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/JingnanJia/article/details/134150561

版权

HTML2CSS 专栏收录该内容

64 篇文章

订阅专栏

html+css.jpeg

一、Web Fonts

在之前的 CSS 属性当中有讲到字体 font-family，该属性可以设置一个或者多个字体名称，渲染时浏览器会在字体列表中寻找，直到找到它运行系统上的可用的字体。

当时系统本地的字体是有限的，我们也就无法设置更加个性化的字体，但是我们可以使用网络字体来实现这种个性化的需求。

使用 Web Fonts 首先要获取到要使用的个性化字体，可以是授权的收费字体或者是设计人员设计好的字体甚至是一些免费的字体，在部署静态资源时将选择的字体一起部署到静态服务器当中。

从用户角度来说，当浏览一个网页时，网页中的一些个性化字体文件会被一起下载下来，浏览器会根据字体在下载字体文件中查找、解释、使用对应的字体，并最终在页面中显示出来。

网络字体使用步骤

第一步：在字体天下下载字体

下载下来的文件是 zip 文件，解压之后就可以获取到直接可以使用的 .ttf 后缀的字体，并拷贝到项目目录下的 fonts 文件夹中

第二步：引入网络字体

创建 HTML 页面，在样式中使用 @font-face 属性引入网络字体并自定义字体的名称，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*引入下载好的网络字体*/
    @font-face {
      font-family: "xingshu";
      src: url("./fonts/AaMoYunXingShu-2.ttf");
    }
  </style>
</head>
<body>
  <div class="box">网络字体的使用</div>
</body>
</html>

第三步：使用字体

设置如下 CSS 代码，通过引入网络字体时设置的字体名称来使用这个网络字体：

.box {
  font-family: "xingshu";
  font-size: 30px;
}

使用 LiverServer 打开 HTML 页面，具体效果如下：

@font-face 用于加载一个自定义的字体。

二、WebFonts 的兼容性

我们刚才使用的是 .ttf 后缀的字体文件，是 TrueType 类型字体，由于在开发中可能会出现某些浏览器不支持 .ttf 后缀类型的字体，因此我们还需要其他类型字体来解决兼容性的问题。

OpenType 和 TrueType 字体的后缀分别是 .otf 和 .ttf，除此之外，还有 Embedded OpenType 字体，后缀名为 .eot，是 OpenType 字体的压缩版；还有 SVG 字体，后缀名为 .svg 或者 .svgz；以及 Web Open Font Fromat Web 开发字体（WOFF），后缀名为 .woff，建立在 TrueType 字体智商。

各个字体以及浏览器的兼容性如下图所示：

我们可以通过一个网站来生成各种不同后缀的字体。

WebFonts 的兼容性写法

创建一个新的 HTML 页面，在该页面中使用 @font-face 属性引入不同的后缀名的字体，可以设置多个 src，或者 src 中通过逗号填写多个不同的字体，但是 font-family 只能有一个，具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: "AaQingHuanYuanTi";
      src: url("./fonts/AaQingHuanYuanTi.eot"); /*IE9 兼容*/
      src: url("./fonts/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"), /*IE6-IE8*/
           url("./fonts/AaQingHuanYuanTi.woff") format("woff"), /* chrome、firefox */
           url("./fonts/AaQingHuanYuanTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
           url("./fonts/AaQingHuanYuanTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
          
      font-style: normal;
      font-weight: normal;     
      }

    .box {
      font-family: "AaQingHuanYuanTi";
    }
  </style>
</head>
<body>
  <div class="box">网络字体的兼容性</div>
</body>
</html>

使用 LiverServer 在不同的浏览器中打开，查看兼容性：