文: jack同学
jack同学
-
web字体： 为了解决用户电脑上没有安装的字体
可以使用font-family设置字体显示，需要用户电脑本身就支持某个字体
-
第二种强制让用户下载该字体
准备一个字体文件（一般公司设计师会提供），一般字体文件格式每个浏览器支持都不同，所以需要同一个字体的多个格式文件。（常见的字体格式有 .ttf / .otf / .eot / .woff / .woff2 / .svg
-
使用@font-face指令制作一个新字体
@font-face { font-family: "杰克体"; /*给新字体取名字*/ src: url("./../font/杰克体.ttf"), /*指定新字体的路径*/ url("./../font/杰克体.eot"), url("./../font/杰克体.woff"), url("./../font/杰克体.svg"); } -
使用新字体
.icon { font-family: "杰克体" !important; } /* 当添加这个类名时，当前元素就使用了这个新字体了*/
- 当页面加载这个css文件时，浏览器会临时使用这个字体在这个页面，当页面关闭字体失效
-
字体图标
- 把需要的图标制作成web字体文件，使用web字体加载的方式使用。
- 优点：字体图标数量可控，文件较小，效率更高，字体图标可设置颜色、大小、粗细等且不会改变字体图标的质量，不会模糊，因为他们本身就是字体。
-
雪碧图(精灵图)
- 一些小的图片合成为一张图片加载到页面，通过background-position定位图片显示
- 根据公司情况使用雪碧图还是字体图标
- 优点：只加载一张图片，减少文件大小，减少请求次数
-
常用字体图标库网站
- 阿里巴巴字体图标库https://www.iconfont.cn/
