css3新特性第五章(web字体)

web字体

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。

Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

一、基本使用

可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字

体了。

将我们提前需要用到的字体传到服务器
在需要用到的地方引入

弊端：字体过大，耗费流量

简写方式

@font-face {

font-family: "情书字体";

src: url('./方正手迹.ttf');

}
高兼容性写法

@font-face {

font-family: "atguigu";

font-display: swap;

src: url('webfont.eot'); /* IE9 /
src: url('webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'), / chrome、firefox /
url('webfont.ttf') format('truetype'), / chrome、firefox、opera、Safari,

Android*/

url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */

}

代码

markdown 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1.基本使用</title>
  <style>
     p {
       font-size: 40px;
     }
     
     @font-face {
      font-family: 'lq-font';
      src: url(./font1/方正手迹.ttf);
     }

     .box2 {
       font-family: 'lq-font';
     }

  </style>
</head>
<body>
    <p class="box1">春风得意马蹄疾,一日看尽长安花</p>
    <p class="box2">春风得意马蹄疾,一日看尽长安花</p>
</body>

效果

结论

我们看到上边是没有使用字体的演示,下发为使用了字体后的展示；

如果我们一直保存可以看到下边字体出现闪动情况，如果这个时候我们将network调整为 3G 我们可以很明显的看到字体过了一会才变为我们需要后的样式；

二、定制字体

中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont

实际上就是按需引入，我需要什么字体就提前生成好

使用方法

我们将下载后的文件是一个zip解压后里面有 ttf和woff文件

代码

markdown 复制代码

 <style>
     p {
       font-size: 40px;
     }
     
     @font-face {
      font-family: "webfont";
      font-display: swap;
      src: url('./font/webfont.eot'); /* IE9 */
      src: url('./font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('./font/webfont.woff2') format('woff2'),
      url('./font/webfont.woff') format('woff'), /* chrome、firefox */
      url('./font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('./font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    }

     .t2 {
       font-family: 'webfont';
     }

  </style>
</head>
<body>
    <p class="t1">英雄难过美人关，我不是英雄，美人让我过了关</p>
    <p class="t2">英雄难过美人关，我不是英雄，美人让我过了关</p>
</body>

效果

三、字体图标

相比图片更加清晰。
灵活性高，更方便改变大小、颜色、风格等。
兼容性好， IE 也能支持
阿里图标官网地址：https://www.iconfont.cn/

基本使用方法

下载后本地引入

Unicode 方式

该方式引入后图标没有颜色，引入比较繁琐,而且我们根本不知道&#xe60d对应的是什么

效果

代码

markdown 复制代码

  <title>字体图标本地方式1-无颜色</title>
  <style>
    @font-face {
      font-family: 'iconfont';
      src: url('./font/iconfont.woff2?t=1745211806231') format('woff2'),
       url('./font/iconfont.woff?t=1745211806231') format('woff'),
       url('./font/iconfont.ttf?t=1745211806231') format('truetype');
    }

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 50px;
    }

  </style>

</head>
<body>
  <span class="iconfont">&#xe60d;</span>
  <span class="iconfont">&#xe60e;</span>
  <span class="iconfont">&#xe611;</span>
  <span class="iconfont">&#xe612;</span>
</body>

Font class 方式

改方式引入也没有颜色，但是可以自定义class的名称，起码自己认识 ,需要引入一个css文件

效果

代码

markdown 复制代码

  <title>字体图标本地方式2-无颜色</title>
  <link rel="stylesheet" href="./font/iconfont.css">
  <style>

    .iconfont {
      font-size: 50px;
    }

  </style>

</head>
<body>
  <span class="iconfont icon-shouxinhoujiance"></span> 
  <span class="iconfont icon-xiaoxidingyue"></span> 
  <span class="iconfont icon-zhuanxiangpaicha"></span> 
  <span class="iconfont icon-zhuandaiguanli"></span> 
</body>

Symbol 方式

该方式可以显示颜色，但是兼容性不是特别好,需要引入一个js文件

效果

代码

markdown 复制代码

<title>字体图标本地方式3-彩色</title>
  <script src="./font/iconfont.js"></script>
  <style>

    .icon {
      width: 50px;
    }

  </style>

</head>
<body>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-shouxinhoujiance"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xiaoxidingyue"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-zhuanxiangpaicha"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-zhuandaiguanli"></use>
  </svg>

在线引用

我们可以不把font字体放到我们项目里面，直接使用阿里云在线服务器，但是不能保证稳定性！

Unicode 方式

跟上面本地引入效果一样，只不过我们写的地址是在线地址

效果

代码

markdown 复制代码

 <title>字体图标本地方式1-无颜色</title>
  <style>
    /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
    @font-face {
      font-family: 'iconfont';  /* Project id 4900244 */
      src: url('//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.woff2?t=1745214104002') format('woff2'),
          url('//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.woff?t=1745214104002') format('woff'),
          url('//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.ttf?t=1745214104002') format('truetype');
    }

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 50px;
    }

  </style>

</head>
<body>
  <span class="iconfont">&#xe60d;</span>
  <span class="iconfont">&#xe60e;</span>
  <span class="iconfont">&#xe611;</span>
  <span class="iconfont">&#xe612;</span>
</body>

Font class 方式

上上方一样，看地址变为在线了

效果

代码

markdown 复制代码

 <title>字体图标本地方式2-无颜色</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.css">
  <style>

    .iconfont {
      font-size: 50px;
    }

  </style>

</head>
<body>
  <span class="iconfont icon-shouxinhoujiance"></span> 
  <span class="iconfont icon-xiaoxidingyue"></span> 
  <span class="iconfont icon-zhuanxiangpaicha"></span> 
  <span class="iconfont icon-zhuandaiguanli"></span> 
</body>

Symbol 方式

可以显示颜色

效果

代码

markdown 复制代码

  <title>字体图标本地方式3-彩色</title>
  <script src="//at.alicdn.com/t/c/font_4900244_gsa9vspr5mp.js"></script>
  <style>

    .icon {
      width: 50px;
    }

  </style>

</head>
<body>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-shouxinhoujiance"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xiaoxidingyue"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-zhuanxiangpaicha"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-zhuandaiguanli"></use>
  </svg>
</body>