1.字体
使用font-family属性来定义文字的字体
属性值为字体的名称,可以设置多个字体名称,浏览器会按照顺序使用它第一个支持的字体(本地电脑有没有安装改字体)
相当于 字体优先级列表
介绍几个常用的字体:
1.常用的英文字母字体
衬线字体serif ; 从显示形状来说,比较花哨,在字体边缘有一些修饰的效果,主要是用于标题的显示
非衬线字体sans-serif; 比较圆润,在显示上,没有花哨的修饰,一般用于正文的显示
等宽字体 每个字体都等宽 font-family: monospace;/等宽字体/
快速查看字体样式的方法:
打开开发者工具,在右边,会看到style旁边有一个computed ,点选,就可以查看啦
其中,Rendered Fonts 这里 显示 真正 渲染的字体
2.常用的中文字体
比如说,衬线字体,常用的就是宋体
非衬线字体,常用的就是黑体
分平台介绍一下,(平台默认的字体)
比如说,
微软的Windows平台上,比较常用的字体就是
Microsoft YaHei 微软雅黑
那么苹果Mac系统上,常用的字体是,PingFang SC
那么如何知道自己电脑都支持哪些字体呢?
(因为,如果不支持,即使设置了font-family也不生效)
略。。。。
2.字体尺寸
使用font-size属性来定义文字的尺寸
属性值为长度值,例如 30px
也可以使用百分比,例如 50%
(这个百分比是相对于其父元素,父容器 而定义出来的)
3.字体样式
使用font-style属性 设置文字为斜体
默认属性值为normal显示标准效果
当属性值为italic时,显示右侧倾斜效果(意大利)
4.字体粗细
使用font-weight属性设置文字的粗细
默认值为normal,相当于400,显示效果为正常粗细
当属性值为bold时,相当于700,显示为粗体
当属性值为bolder时,显示更粗
当属性值为lighter时,显示更细
也可设置属性值为一个具体数值100/200/300/400/500/600/700/800/900 九个当中的一个 不能设置 150 font-weight它不认识。会自动变成默认的400px哒
5.简写属性
使用font属性来定义所有文字的样式
各个属性值用 空格 分隔
font=font-family font-size font-style font-weight
例如:
p {font :monospace 50px bold italic}
小例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>字体</title><style>.text1 {/* 衬线字体*//* font-family: serif; *//* 非衬线字体 *//* font-family: sans-serif; *//* 等宽字体 *//* font-family: monospace; *//* 稍微注意一下整个高度是 30 px真正我们看到的,这个字体,会比30px这个高度稍微小一些 *//* font-size: 30px; *//* 向右倾斜字体 *//* font-style: italic; *//* font-weight: 100; *//* 这里设置50px行高 */font:italic 30px/50px bold serif;}</style></head><body><div class="text1">sagadlfhaihhjcagiagliu</div><div class="text1">华为云在线教育解决方案</div></body></html>
CSS常用属性-3.1字体文字-1.字体font-family-2.尺寸font-size-3.样式font-style-4.粗细font-weight-5.简写属性font