目录
图标字体(iconfont)(可看font awesome网站或者iconfont(国内网站))
样式
1、color:字体颜色
2、font-size:字体大小
3、font-family:字体格式
(可选值为字体的类别,浏览器会自动使用该类别下的字体)
(字体名称中要是有空格则要带上‘’)
(可同时指定多个字体,“,”隔开,优先使用第一个,第一个无法使用则使用第二个,以此类推)
1、serif:衬线字体
2、sans-serif:非衬线字体
3、monospace:等宽字体
4、cursive:草书字体
style样式
1、@font-face:可以将服务器中的字体直接提供给用户使用
属性:font-family(字体名称)(先看这个字体有没有,如果没有则使用src指定的路径去自动下载)
src(服务器中字体的路径)
问题:1、加载速度 2、版权
图标字体(iconfont)(可看font awesome网站或者iconfont(国内网站))
1、通过font-face引入
2、可使用内联样式设置图标样式
Font awesome使用步骤:
1、下载
2、解压
3、将css和webfonts文件夹移到vscode(必须在同一个大的文件夹中)
4、将all.css引入网页中
5、使用图标字体:直接使用类名来使用
例如:<i class=“fas fa-bell”></i>
<i class=“fab fa-accessible-icon”></i>
通过为元素来设置图标字体:
1、找到要设置图标的元素通过before或after
2、在content中设置字体的编码(“\”+编码)
3、设置字体和样式
通过实体来使用图标字体
1、&#x图标编码;
阿里图标库
类名:iconfont
1、引入文件
2、
3、用类的方法
4、用伪类
行高
文字占有的实际高度
1、Line-height设置行高(可以指定大小(px,em)或指定整数(字体的倍数))
默认行高:1.33
2、可以将行高设置和高一样,使单行文字子啊一个元素中垂直居中
3、行间距=行高-字体大小
字体的简写属性
font(可同时设置字体相关的所有属性)
语法:font:字体大小/行高(可省略) 字体族
font-weight 字重(字体加粗)
可选值:
normal 默认 不加粗
bold 加粗
100-900(九个级别)(没什么用)
font-style:字体风格
可选值:
normal 默认 正常
Italic 斜体
text-align 文本水平对齐
可选值:
left:左侧对齐
right:右侧对齐
center:居中对齐
justify:两端对齐
vertical-align 文本垂直对齐
可选值:
baseline 默认 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐(子元素和父元素中线对齐)
数字px
text-decoration 文本修饰
可选值:
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
white-space 网页处理空白
可选值:
normal 默认
nowrap 不换行
pre 保留空白
text-overflow 文本溢出处理
可选值:
ellipsis 省略号