写在前面
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！
如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！
目录
写在前面
1. web 字体
1.1 基本用法
1.2 定制字体
1.3 字体图标
结语
【往期回顾】
【CSS3系列】第四章 · CSS3新增渐变
【CSS3系列】第三章 · CSS3新增边框和文本属性
【CSS3系列】第二章 · CSS3 新增盒模型和背景属性
【CSS3系列】第一章 · CSS3新增的三种基本属性
【其他系列】
【HTML5系列】
【HTML4系列】
【CSS2系列】
【Java基础系列】
1. web 字体
1.1 基本用法
- 可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。
- 语法（简写方式）
@font-face { font-family: "情书字体"; src: url('./方正手迹.ttf'); }
- 语法（高兼容性写法）
@font-face { font-family: "haha"; 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- */ }<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @font-face { font-family: "情书字体"; src: url('./font1/方正手迹.ttf'); } @font-face { font-family: "atguigu"; font-display: swap; src: url('./font2/webfont.eot'); /* IE9 */ src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./font2/webfont.woff2') format('woff2'), url('./font2/webfont.woff') format('woff'), /* chrome、firefox */ url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ } .t1 { font-size: 100px; font-family: '情书字体'; } .t2 { font-size: 100px; font-family: 'atguigu'; } </style> </head> <body> <h1 class="t1">春风得意马蹄疾，不信人间有别离</h1> <h1 class="t2">春风得意马蹄疾，不信人间有别离</h1> </body> </html>
1.2 定制字体
- 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
- 可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont
1.3 字体图标
- 相比图片更加清晰。
- 灵活性高，更方便改变大小、颜色、风格等。
- 兼容性好， IE 也能支持。
- 字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，视频中我们是以使用最多的阿里图标库作为演示。
- 阿里图标官网地址：https://www.iconfont.cn/
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02_字体图标_方式一</title> <style> /* 第一步 */ @font-face { font-family: 'iconfont'; src: url('./font3/iconfont.woff2?t=1676857973138') format('woff2'), url('./font3/iconfont.woff?t=1676857973138') format('woff'), url('./font3/iconfont.ttf?t=1676857973138') format('truetype'); } /* 第二步 */ .iconfont { font-family: "iconfont" !important; font-size: 100px; } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>03_字体图标_方式二</title> <link rel="stylesheet" href="./font3/iconfont.css"> <style> .iconfont { font-size: 100px; } </style> </head> <body> <span class="iconfont icon-chengzi"></span> <span class="iconfont icon-bingqilin"></span> <span class="iconfont icon-hanbao"></span> <span class="iconfont icon-kafeibei"></span> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04_字体图标_方式三</title> <script src="./font3/iconfont.js"></script> <style> svg { width: 150px; } </style> </head> <body> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chengzi"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-bingqilin"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-hanbao"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-kafeibei"></use> </svg> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05_字体图标_方式一_在线使用</title> <style> @font-face { font-family: 'iconfont'; /* Project id 3904680 */ src: url('//at.alicdn.com/t/c/font_3904680_cctp97jw61q.woff2?t=1676858967519') format('woff2'), url('//at.alicdn.com/t/c/font_3904680_cctp97jw61q.woff?t=1676858967519') format('woff'), url('//at.alicdn.com/t/c/font_3904680_cctp97jw61q.ttf?t=1676858967519') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 100px; } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>06_字体图标_方式二_在线使用</title> <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3904680_cctp97jw61q.css"> <style> .iconfont { font-size: 100px; } </style> </head> <body> <span class="iconfont icon-chengzi"></span> <span class="iconfont icon-bingqilin"></span> <span class="iconfont icon-hanbao"></span> <span class="iconfont icon-kafeibei"></span> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>07_字体图标_方式三_在线使用</title> <script src="//at.alicdn.com/t/c/font_3904680_cctp97jw61q.js"></script> </head> <body> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-chengzi"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-bingqilin"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-hanbao"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-kafeibei"></use> </svg> </body> </html>
结语
本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力
