CSS字体（font）
2020-02-16 本文已影响0人
Syaroing阿樱
字体
字体的颜色
color 用来设置字体颜色
字体的大小
- font-size 字体的大小
- 和font-size相关的单位
- em 相当于当前元素的一个font-size
- rem 相对于根元素的一个font-size
字体的格式
- font-family 字体族
- 可选值：
- serif 衬线字体
- sans-serif 非衬线字体
- monospace 等宽字体
- 指定字体的类别，浏览器会自动使用该类别下的字体
- font-family 可以同时指定多个字体，多个字体间使用,隔开.字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
@font-face {
/* 指定字体的名字 */
font-family: "myfont";
/* 服务器中字体的路径 */
src: url("./font/ZCOOLKuaiLe-Regular.ttf") format("truetype");
}
p {
color: blue;
font-size: 40px;
font-family: myfont;
}
</style>
</head>
<body>
<p>
今天天气真不错，Hello Hello How are you！
</p>
</body>
</html>
font-face
- font-face可以将服务器中的字体直接提供给用户去使用
- 问题：
- 加载速度
- 版权
- 字体格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
@font-face {
/* 指定字体的名字 */
font-family: "myfont";
/* 服务器中字体的路径 */
src: url("./font/ZCOOLKuaiLe-Regular.ttf") format("truetype");
}
p {
color: blue;
font-size: 40px;
font-family: myfont;
}
</style>
</head>
<body>
<p>
今天天气真不错，Hello Hello How are you！
</p>
</body>
</html>
图标字体
图标字体（iconfont）简介
- 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活
- 所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
使用图标字体的方法
fontawesome
- 下载 https://fontawesome.com/
- 解压
- 将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 保留空白
