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 方式
该方式引入后图标没有颜色，引入比较繁琐,而且我们根本不知道对应的是什么
效果
代码
<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"></span><span class="iconfont"></span><span class="iconfont"></span><span class="iconfont"></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"></span><span class="iconfont"></span><span class="iconfont"></span><span class="iconfont"></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>
