当前位置：首页 > news >正文

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

news 来源：原创 2025/4/22 12:02:03

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- */
}

代码

<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文件

代码

 <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对应的是什么

效果

在这里插入图片描述

代码

  <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文件

效果

在这里插入图片描述

代码

  <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文件

效果

在这里插入图片描述

代码

<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 方式

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

效果

在这里插入图片描述

代码

 <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 方式

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

效果

在这里插入图片描述

代码

 <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 方式

可以显示颜色

效果

在这里插入图片描述

代码

  <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>