7.前端--CSS-字体属性【2023.11.26】

CSS字体属性

CSS Fonts (字体)属性用于定义字体样式、粗细、大小、和字形。

1.文字样式

CSS 使用 font-style 属性设置文本的风格。

语法:

html 复制代码
p { 
 	font-style: normal;
}

属性:

2字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

语法:

html 复制代码
p { 
 	font-weight: bold;
}

属性:

3.字体大小

CSS 使用 font-size 属性定义字体大小。

语法:

html 复制代码
p { 
 	font-size: 20px; 
}

属性:

1.px(像素)大小是我们网页的最常用的单位

2.谷歌浏览器默认的文字大小为16px

  1. 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小

4.可以给 body 指定整个页面文字的大小

4.字体字型

CSS 使用 font-family 属性定义文本的字体系列。

语法:

html 复制代码
p { font-family:"微软雅黑";} 
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开如果有空格隔开的多个单词组成的字体,加引号.

5.字体综合写法

样式 粗细 大小 字型 记住

语法:

html 复制代码
body { 
 font: font-style font-weight font-size/line-height font-family;
}

使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开

不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用

6.总结

相关推荐
定栓3 分钟前
Webpack迁到Vite第七节(四):全家桶移除 — 保留项、脚本与数据收尾
前端·webpack·node.js
数据掘金12 分钟前
小程序埋点方案的埋点文档怎么自动生成?
前端
deli00712 分钟前
cron 表达式为什么总跑错?10 个场景实测,下次执行时间一眼看懂
前端
代码猎人16 分钟前
前端怎么优化页面性能
前端
代码猎人18 分钟前
前端怎么配合后端完成数据对接
前端
lexiangqicheng24 分钟前
Docker的沙箱机制是怎样的?
前端·javascript
燕落南枝1 小时前
HTML 表格标签与 AI 合并单元格实战指南
前端·人工智能·html
zyseo81 小时前
谷歌SEO 内链地图脚本:Python 画出权重分发,揪出孤岛页
java·前端·python
ClickHouseDB2 小时前
ClickHouse .NET 驱动程序新特性:从 1.0 到 1.3 的演进之路
java·前端·windows