【CSS3系列】第五章 · web 字体 |
您所在的位置：网站首页 › 文本字体模糊怎么处理 › 【CSS3系列】第五章 · web 字体 |
【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- */ } Document @font-face { font-family: "情书字体"; src: url('./font1/方正手迹.ttf'); } @font-face { font-family: "atguigu"; font-display: swap; src: url('./font2/webfont.eot'); /* IE9 */ src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./font2/webfont.woff2') format('woff2'), url('./font2/webfont.woff') format('woff'), /* chrome、firefox */ url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ } .t1 { font-size: 100px; font-family: '情书字体'; } .t2 { font-size: 100px; font-family: 'atguigu'; } 春风得意马蹄疾，不信人间有别离 春风得意马蹄疾，不信人间有别离 1.2 定制字体 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。 可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont 1.3 字体图标 相比图片更加清晰。 灵活性高，更方便改变大小、颜色、风格等。 兼容性好， IE 也能支持。 字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南，视频中我们是以使用最多的阿里图标库作为演示。 阿里图标官网地址：https://www.iconfont.cn/ 02_字体图标_方式一 /* 第一步 */ @font-face { font-family: 'iconfont'; src: url('./font3/iconfont.woff2?t=1676857973138') format('woff2'), url('./font3/iconfont.woff?t=1676857973138') format('woff'), url('./font3/iconfont.ttf?t=1676857973138') format('truetype'); } /* 第二步 */ .iconfont { font-family: "iconfont" !important; font-size: 100px; } 03_字体图标_方式二 .iconfont { font-size: 100px; } 04_字体图标_方式三 svg { width: 150px; } 05_字体图标_方式一_在线使用 @font-face { font-family: 'iconfont'; /* Project id 3904680 */ src: url('//at.alicdn.com/t/c/font_3904680_cctp97jw61q.woff2?t=1676858967519') format('woff2'), url('//at.alicdn.com/t/c/font_3904680_cctp97jw61q.woff?t=1676858967519') format('woff'), url('//at.alicdn.com/t/c/font_3904680_cctp97jw61q.ttf?t=1676858967519') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 100px; } 06_字体图标_方式二_在线使用 .iconfont { font-size: 100px; } 07_字体图标_方式三_在线使用
本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力
|
【本文地址】
今日新闻 |
推荐新闻 |