CSS3字体

1. 基本用法

可以通过 @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- */
}

2. 定制字体

中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制

可使用阿里 Web 字体定制工具：iconfont-webfont平台

3. 字体图标

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

字体图标使用场景：主要用于显示网页中通用的、常用的一些小图标

字体图标的优点：

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器，请放心使用
• 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化