font字体
一、font-size:大小
1、作用:font-size属性用于设置字号。
p {
font-size:20px;
}
2、单位:①可以使用相对长度单位,也可以使用绝对长度单位;
②相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
相对长度单位 | 说明 |
em | 相对于当前对象内文本的字体尺寸 |
px | 像素,最常用,推荐使用 |
绝对长度单位 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
3、注意:①我们的字号大小以后基本就用px了,其他单位很少使用;
②谷歌浏览器默认的文字大小为16px;
③但是不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。
二、font-family:字体
1、作用:font-family属性用于设置哪一种字体。
如:p {font-family:“微软键盘”;}
①网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑;
②可以同时指定多个字号,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。如果都没有,则以我们电脑默认的字体为准。
如:p {font-family:Arial,"Microsoft Yahei","微软雅黑","黑体"}
2、注意:①各种字体之间必须使用英文状态下的逗号隔开;
②中文字体需要加英文状态下的引号,英文字号一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前;
③如果字体名中包括空格、#、$等符号,则改字体必须加英文状态下的单引号或双引号,例如font-family:"Times New Roman"; ;
④尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
3、CSS Unicode字体
⑴使用Unicode字体的原因:
①在CSS中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8等)不匹配时会产生乱码的错误;
②xp系统不支持类似微软雅黑的中文。
⑵解决:
①方案一:可以使用英文来代替,比如 font-family:"Microsoft Yahei"。
②方案二:在CSS直接使用 Unicode 编码来写字体名称可以避免这些错误,使用 Unicode 写中文字体名称,浏览器是可以正确解析的。
如: font-family:"\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。
⑶(为了照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体)
字体名称 | 英文名称 | Unicode编码(写的时候要加引号) |
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimsun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft Yahei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B6\4E66 |
幼圆 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
三、font-weight:字体粗细
1、将字体加粗的方法:
①在html中可以通过标签来实现将字体加粗,使用 b 和 strong 标签来将文本加粗;
②也可以使用CSS来实现,但是CSS是没有语义的。
属性值 | 描述 |
normal | 默认值(不加粗的),相当于number为400 |
bold | 定义粗体(加粗的),相当于number为700 |
number | 100-900(必须是整百) |
记住:400等同于normal,700等同于bold
2、提倡:我们平时更喜欢用数学来表示加粗和不加粗。
四、font-style:字体风格
1、将字体倾斜的方法:
①在html中可以通过标签来实现将字体倾斜,用 i 和 em 标签来使得字体倾斜;
②可以使用CSS来实现,但是CSS是没有语义的。
2、font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
属性 | 作用 |
normal | 默认值,浏览器会显示标准的字体样式, |
italic | 浏览器会显示斜体的字体样式 |
3、注意:我们平时很少给文本加斜体,反而喜欢给斜体标签(em、i)改为普通模式。
font-style:normal 让倾斜的字体变得不倾斜。
五、font:综合设置字体样式(重点)⭕
1、基本语法格式:
属性 | 表示 | 注意点 |
font-size | 字号 | 我们通常用的单位是px像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是700或者bold,不加粗是normal或者400,记住数字不要跟单位 |
font-style | 字体样式 | 记住倾斜是italic,不倾斜是normal,工作中我们最常用的是normal |
font | 字体连写 |
1、字体连写是有顺序的,不能随意换位置; 2、其中字号和字体必须同时出现 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库