字体

字体的颜色

color 用来设置字体颜色

字体的大小

font-size 字体的大小

和font-size相关的单位

em 相当于当前元素的一个font-size

rem 相对于根元素的一个font-size

字体的格式

font-family 字体族

可选值：

serif 衬线字体

sans-serif 非衬线字体

monospace 等宽字体

指定字体的类别，浏览器会自动使用该类别下的字体

font-family 可以同时指定多个字体，多个字体间使用,隔开.字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推

Document

@font-face {

/* 指定字体的名字 */

font-family: "myfont";

/* 服务器中字体的路径 */

src: url("./font/ZCOOLKuaiLe-Regular.ttf") format("truetype");

}

p {

color: blue;

font-size: 40px;

font-family: myfont;

}

今天天气真不错，Hello Hello How are you！

font-face

font-face可以将服务器中的字体直接提供给用户去使用

问题：

加载速度

版权

字体格式

Document

@font-face {

/* 指定字体的名字 */

font-family: "myfont";

/* 服务器中字体的路径 */

src: url("./font/ZCOOLKuaiLe-Regular.ttf") format("truetype");

}

p {

color: blue;

font-size: 40px;

font-family: myfont;

}

今天天气真不错，Hello Hello How are you！

图标字体

图标字体(iconfont)简介

在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活

所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入

这样我们就可以通过使用字体的形式来使用图标

使用图标字体的方法

fontawesome

解压

将css和webfonts移动到项目中

将all.css引入到网页中

使用图标字体

直接通过类名来使用图标字体

class="fas fa-bell"

class="fab fa-accessible-icon"

阿里巴巴矢量图标库

详情见阿里的介绍

行高

行高(line height)简介

行高指的是文字占有的实际高度

可以通过line-height来设置行高

行高可以直接指定一个大小(px em)，也可以直接为行高设置一个整数

如果是一个整数的话，行高将会是字体的指定的倍数

行高经常还用来设置文字的行间距

行间距 = 行高 - 字体大小

字体框

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

行高在布局中的应用

可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

字体的粗细

font-weight 字重 字体的加粗

可选值：

normal 默认值 不加粗

bold 加粗

100-900 九个级别(没什么用)

字体风格

font-style 字体的风格

可选值

normal 正常的

italic 斜体

字体的简写属性

font 可以设置字体相关的所有属性

语法：

font: 字体大小 字体颜色 字体粗细 字体风格 字体大小/行高 字体族

行高可以省略不写 如果不写使用默认值

文本的样式

text-align 文本的水平对齐

可选值：

left 左侧对齐

right 右对齐

center 居中对齐

justify 两端对齐

vertical-align 设置元素垂直对齐的方式

可选值：

baseline 默认值 基线对齐

top 顶部对齐

bottom 底部对齐

middle 居中对齐

text-decoration 设置文本修饰

可选值：

none 什么都没有

underline 下划线

line-through 删除线

overline 上划线

white-space 设置网页如何处理空白

可选值：

normal 正常

nowrap 不换行

pre 保留空白