字体族
字体相关样式
-
color 用于设置字体颜色
-
font - size 字体大小
单位:
em相当于当前元素的一个font-size
rem 相当于根元素的一个font-size -
font-family 字体族(字体格式)
可选值:
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
(指定字体的类别,浏览器会自动使用该类别下的字体)
可以同时指定多个字体,多个字体间使用‘,’进行隔开。字体生效时优先使用第一个,第一个无法使用之后第二个补上,以此类推。
@font-face{
font-family:'myfont';
src:url('./zi.ttf') format("truetype");
}
图标字体
- 在网页中经常需要使用一些图标,可以通过图片引入图库。但是图片大小本身比较大,并且非常不灵活。
- 所以在使用一些图标的时候,我们还可以将图标直接设置为字体,这样我们就可以通过font-face的形式来对字体进行引入。
- 我们也可以以使用字体的形式,使用图标。
fontawesome
fontawesome使用步骤:
- 进入www.fontawesome.com
- 下载
- 将css和webfonts移动到项目中
- 将all.css引入到网页当中
- 使用图标字体
直接通过类名来使用图标字体
class="fas fa-bell";
class="fab fa-accessible-icon";
通过伪元素设置使用图标字体
- 找到要设置图标的元素,通过before或者after选中
- 在content中设置字体的编码
- 设置字体的样式
fab
font-family: ‘Font Awesome 5 Brands’;
fas
font-family: ‘Font Awesome 5 Free’;
<style>
li{
list-style: none;
}
li::before{
content: '\f1b0';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li> haha </li>
</ul>
直接通过实体来使用图标字体
&#x图标的编码;
<span class="fas"></span>
iconfont
iconfont使用步骤:
- 进入www.iconfont.cn
- 选择想要的图标
- 添加至我的项目
- 下载
- 将内容解压移动到程序文件夹
- 引入到网页当中
- 使用图标字体
行高(line height)
- 行高是指文字占有的实际高度
- 可以通过line-height来设置行高
行高可以直接指定一个大小(px em)
也可以直接为行高设置一个整数
如果是一个整数的话,行高将会是字体的指定倍数 - 行高经常还用来设置文字的行间距
行间距 = 行高 - 字体大小
行高会在字体框的上下平均分配
字体的简写属性
font 可以设置字体相关的所有属性
font:加粗 斜体 字体大小/行高 字体族
font: bold italic 50px/2 微软雅黑;
文本样式
text-align 文本水平对齐
left 左侧对齐
right 右侧对其
center 居中对齐
justify 两端对齐
vertical-align 设置元素垂直对齐方式
可选值:
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
text-decoration 设置文本修饰
none 无
underline 下划线
line-through 删除线
white-space 设置网页如何处理空白
normal 正常
nowrap 不换行
pre 保留空白