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:font-style font-weight font-size/line-height font-family;}
2、注意:①使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开;
      ②其中不需要设置的属性可以省略(取默认值),但必须保留font-size和 font-family属性,否则font属性将不起作用。
六、font总结
属性 表示 注意点
font-size 字号 我们通常用的单位是px像素,一定要跟上单位
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 记住加粗是700或者bold,不加粗是normal或者400,记住数字不要跟单位
font-style 字体样式 记住倾斜是italic,不倾斜是normal,工作中我们最常用的是normal
font 字体连写

1、字体连写是有顺序的,不能随意换位置;

2、其中字号和字体必须同时出现

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

posted @   燕归楼  阅读(925)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示