CSS字体

目录

样式

style样式

图标字体（iconfont）（可看font awesome网站或者iconfont（国内网站））

阿里图标库

3、用类的方法

4、用伪类

行高

字体的简写属性

font-weight 字重（字体加粗）

font-style：字体风格

text-align 文本水平对齐

vertical-align 文本垂直对齐

text-decoration 文本修饰

white-space 网页处理空白

text-overflow 文本溢出处理

---

样式

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 省略号