一.font-size(重要)
🤢font-size
:决定文字的大小,常用的设置方式如下:
具体数值+单位
:比如100px
。- 也可以用
em
单位(不推荐),1em
代表100%。 百分比
:基于父元素的font-size
进行计算,比如50%
表示等于父元素font-size
的一半。
<style>
.box{
font-size:12px;
}
</style>
/* 将box盒子中的这字体大小设置为12px */
二.font-family
🥰font-family
用于设置字体的名,可以设置文字的字体名称,浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过@font-face
指定的可以直接下载的字体;
🤢当页面代码设置微软雅黑的话,浏览器首先会去当前电脑的操作系统是否支持当前的字体,浏览器会选择列表中的第一个该计算机上安装的字体,或者通过@font-face
指定的直接下载的字体;
😬如果字体是由多个单词组成的,一般推荐使用''
包裹起来,这样浏览器支持性更好;
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}
三.font-weight
👽font-weight
:用于设置文字的粗细;
- 常见的取值为,
100|200|300|400|500|600|700|800|900
:每一个数字表示一个重要。 - normal 等于400。
- bold:等于700。
🙈strong``b``h1-h6
等标签的font-weight
默认就是bold;
p {
font-weight: bold;
}
四.font-style
🐸font-style
:用于设置文字的常规,斜体显示;
normal
:常规的显示italic
:用字体的斜体显示(通常会有专门的字体)oblique
:文字的倾斜显示(仅仅让文字倾斜)
p {
font-style: italic;
}
五.font-variant
😈font-variant
:影响小写字母的显示形式,variant
是显示形变的意思;
normal
:常规显示;small-caps
:将小写字母替换为缩小过的大写字母;
p {
font-variant: small-caps;
}
六.line-height
🐔line-height
用来设置文本的行高,行高可以先简单理解为一行文字所占据的高度;
🐳行高的严格定义:两行文字基线之间的间距;
🦄基线:与小写字母x
最底部对齐的线;
😈实际案例:如果想让文本居中对齐,将line-height
与height
设置为一样即可;
p {
line-height:20px;
}
六.font缩写
🐳font
是一个缩写,可以用来做font-style
font-variant
font-weight
font-size
line-height
font-family
属性的简写;
font-style
font-variant
font-weight
可以随意调换位置,也可以省略;line-height
可以省略,如果不省略,必须跟在font-size
后面;font-size
,font-family
不可以调换位置,不可以省略;
selector {
font: font-style font-variant font-weight font-size/line-height font-family;
}
🦄总结就是:font-size
和font-family
是必须的并且位置不可换,其他都是可选的;
原文链接:https://juejin.cn/post/7346394191264923658 作者:一溪风月