个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！
文章目录
- CSS 字体图标
- 1 字体图标的产生
- 2 字体图标的优点
- 3 字体图标的下载
- 4 字体图标的引入
- 4.1 Unicode 引用
- 4.2 font-class 引用
- 5 字体图标的追加
- 实战：商城首页
- 1 PxCook安装和使用
- 2 编写代码原则及技巧
CSS 字体图标
1 字体图标的产生
字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
- 图片文件还是比较大的。
- 图片本身放大和缩小会失真。
- 一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
2 字体图标的优点
字体图标较于精灵图的优点：
- 字体图标追加方便
- 字体图标不会失真
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器，请放心使用
注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
- 如果遇到一些结构和样式比较简单的小图标，就用字体图标。图标非常简单的时候使用字体图标。
- 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。图标比较复杂的时候使用精灵图。
- 我们能使用字体图标的时候，尽量就不用精灵图
字体图标加载的原理
页面链接相应的字体文件，再对字体文件中的编码进行解析。
- src = “aaaa.font” —> 链接字体文件
- 浏览器对链接字体文件进行解析，解析字体文件里面的编码
- 比如：aaaa.font 里面有3个编码，分别是 a,b,c，那么我们去使用 a —> a这个字体图标，同理用bc
3 字体图标的下载
阿里 iconfont 字库
iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具
这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。 重点是，免费！
4 字体图标的引入
下载完毕之后，注意原先的文件不要删，后面追加可能会用到。
4.1 Unicode 引用
Unicode 是字体在网页端最原始的应用方式，特点是：
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 默认情况下不支持多色，直接添加多色图标会自动去色。
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
Unicode 使用步骤如下：
第一步：拷贝项目下面生成的 @font-face
- @font-face它是一个css3的引入第三方字体的扩展样式
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot?t=1678946737539'); /* IE9 */
src: url('iconfont.eot?t=1678946737539#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff2?t=1678946737539') format('woff2'),
url('iconfont.woff?t=1678946737539') format('woff'),
url('iconfont.ttf?t=1678946737539') format('truetype'),
url('iconfont.svg?t=1678946737539#iconfont') format('svg');
}
不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
- TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
- Web Open Font Format(.woff)格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
- Embedded Open Type(.eot)格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；
- SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
取值：
字体描述 值 说明 font-family name 必需的。定义字体的名称。 src URL 必需的。定义该字体下载的网址（S） https://www.runoob.com/cssref/css3-pr-font-face-rule.html
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
大多数场景下，@font-face都是用于字体图标。
实际工作中的大多数应用需求，直接使用系统字体即可，极少数需要特殊定制，那么设计师会给出相关字体进行引入即可。
第二步：定义使用 iconfont 的样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased; /*这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。这个设定在ios中表现比较明显，在windows中表现的不明显。*/
-moz-osx-font-smoothing: grayscale; /*这个属性是火狐搞的, grayscale抗锯齿*/
}
第三步：挑选相应图标并获取字体编码，应用于页面
- &; 是html里面编码必须的
- #x 表示后面的编码是一个十六进制数字
<span class="iconfont">3</span>
4.2 font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
5 字体图标的追加
iconfont图标的追加：
将所选择的图标加入某个项目，当未来需要添加的图标时，可以选择入这个项目，重新下载并覆盖。
浏览器第一次链接这个字体文件会进行缓存，如果后期新增就需要强制刷新 ctrl + f5
个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！
文章目录
- CSS 字体图标
- 1 字体图标的产生
- 2 字体图标的优点
- 3 字体图标的下载
- 4 字体图标的引入
- 4.1 Unicode 引用
- 4.2 font-class 引用
- 5 字体图标的追加
- 实战：商城首页
- 1 PxCook安装和使用
- 2 编写代码原则及技巧
实战：商城首页
1 PxCook安装和使用
PxCook下载使用：https://fancynode.com.cn/pxcook
解锁新技能：通过PxCook查看PSD中尺寸、颜色等等样式代码
开发前的准备：
- 准备所有的切图，实际工作中UI设计师都准备好，这里使用教程已准备好的切图即可
- 准备一个自己的通用css文件，比如取名加做 common.css，方便学习和扩展
- 为当前项目准备好精灵图，根据需要将一些小图标进行合并成精灵图，避免不必要的请求，提高性能
2 编写代码原则及技巧
- 优先考虑标准流来完成布局，能不脱标就不脱标
- 其次考虑浮动、定位来完成布局
