【CSS3系列】第五章 · web 字体

写在前面

---

        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- */
}

    
    
    


    
春风得意马蹄疾，不信人间有别离
    
春风得意马蹄疾，不信人间有别离

---

1.2 定制字体

• 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
• 可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont

---

1.3 字体图标

• 相比图片更加清晰。
• 灵活性高，更方便改变大小、颜色、风格等。
• 兼容性好， IE 也能支持。
• 字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，视频中我们是以使用最多的阿里图标库作为演示。

• 阿里图标官网地址：https://www.iconfont.cn/

    
    
    


    
    
    
    

    
    
    


    
    
    
    

---

结语

---

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力