一、字体
<!DOCTYPE html>
<html>
<head>
<title>字体</title>
<meta charset="utf-8">
<style>
/*
font-face可以将服务器中的字体直接提供给用户去使用
问题：
1.加载速度
2.版权
3.字体格式
*/
@font-face {
/* 指定字体的名字 */
font-family: 'myfont';
/* 服务器中字体的路径 */
src: url(./font/HarmonyOS_Sans_SC_Regular.ttf) format("truetype");
}
p{
/*
字体相关的样式：
- color：用来设置字体颜色（前景色）
- font-size：用来设置字体的大小
- 和font-size相关的单位：
- em：相当于当前元素的一个font-size
- px：相当于根元素的一个font-size
- font-weigh：字重，字体的加粗
- 可选值：
- normal：默认值，不加粗
- bold：加粗
- 100-900 九个级别
- font-style：字体的风格
- 可选值：
- normal：正常的
- italic：斜体
- font-family：指定字体族（字体格式），可以同时指定多个字体，多个字体间使用,隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推
- 可选值：指定字体的类别，浏览器会自动使用该类别下的字体
- serif：衬线字体
- sans-serif：非衬线字体
- monospace：等宽字体
- cursive：草书字体
- fantasy：虚幻字体
*/
color: red;
font-size: 30px;
/*font-family: 'Courier New', Courier, monospace;*/
font-family: myfont;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p>永不言弃！Never give up!</p>
</body>
</html>
二、图标字体
图标字体（iconfont），在网页中经常使用一些图标，可以通过图片来引入图标，但是图片本身比较大，并且非常不灵活。所以在使用图标时，我们还可以将图标直接设置为字体，然后通过 font-face 的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。
<!DOCTYPE html>
<html>
<head>
<title>图标字体</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./fontawesome-free-6.2.1-web/css/all.css">
<style>
i{
font-size: 80px;
color: red;
}
li{
list-style: none;
}
li::before{
/*
通过伪元素来设置图标字体
1. 找到要设置图标的元素通过before或after选中
2. 在content中设置字体的编码
3. 设置字体的样式
- fab
- font-family: 'Font Awesome 5 Brands';
- font-weight: 900;
- fas
- font-family: 'Font Awesome 5 Free';
- font-weight: 900;
*/
content: '\f1b0';
/*font-family: 'Font Awesome 5 Brands';*/
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<!--
fontawesome使用步骤：
1.下载 https://fontawesome.com/
2. 解压
3. 将css和webfonts移动到项目中
4. 将all.css引入到网页中
5. 使用图标字体
- 直接通过类名来使用图标字体
class="fas fa-bell"
class="fab fa-accessible-icon"
-->
<i class="fas fa-bell"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-otter"></i>
<ul>
<li>锄禾日当午，</li>
<li>汗滴禾下土。</li>
<li>谁知盘中餐，</li>
<li>粒粒皆辛苦。</li>
</ul>
<!-- 通过实体来使用图标字体：&#x图标的编码; -->
<span class="fas"></span>
</body>
</html>
三、行高
行高（line height），指的是文字占有的实际高度，可以通过 line-height 设置行高。行高可以直接指定一个大小，也可以直接为行高设置一个整数，如果是一个整数的话，行高将会是字体的指定的倍数。行高经常还用来设置文字间的行间距，行间距 = 行高 - 字体大小；
字体框就是字体存在的格子，设置 font-size 实际上就是设置字体框的高度。
<!DOCTYPE html>
<html>
<head>
<title>行高</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./fontawesome-free-6.2.1-web/css/all.css">
<style>
div{
height: 200px;
font-size: 50px;
border: 1px red solid;
/* 可以将行高设置为高度一样的值，是单行文字在一个元素中垂直居中 */
line-height: 200px;
}
</style>
</head>
<body>
<div>落霞与孤鹜齐飞，秋水共长天一色。</div>
</body>
</html>
四、字体的简写属性
<!DOCTYPE html>
<html>
<head>
<title>字体的简写属性</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./fontawesome-free-6.2.1-web/css/all.css">
<style>
div{
border: 1px red solid;
/*
font可以设置字体相关的所有属性
- 语法：
- font:字重/字体风格 字体大小/行高 字体族
- 行高可以省略不写，如果不写，使用默认值
- 字重和字体风格书写没有先后顺序
- 字重和字体庚哥可以省略不写，如果不写，使用默认值
*/
font: italic bold 50px 'Times Now Roman',Times,serif;
}
</style>
</head>
<body>
<div>落霞与孤鹜齐飞，秋水共长天一色。</div>
</body>
</html>
五、文本样式
<!DOCTYPE html>
<html>
<head>
<title>字体</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./fontawesome-free-6.2.1-web/css/all.css">
<style>
.box1{
width: 500px;
border: 1px red solid;
/*
text-align 文本的水平对齐
- 可选值：
- left 左侧对齐
- right 右对齐
- center 居中对齐
- justify 两端对齐
*/
text-align: justify;
}
.box2{
width: 700px;
border: 1px red solid;
font-size: 50px;
}
.s1{
font-size: 30px;
border: 1px blue solid;
/*
vertical-align 设置元素垂直对齐的方式
- 可选值：
- baseline：默认值，基线对齐
- top：顶部对齐
- bottom：底部对齐
- middle：居中对齐
*/
vertical-align: baseline;
}
.box3{
font-size: 50px;
/*
text-decoration 设置文本样式
- 可选值：
- none：默认值，什么都没有
- underline：下划线
- line-through：删除线
- overline：上划线
*/
text-decoration: underline red dotted;
}
.box4{
width: 200px;
/*
white-space 设置网页如何如理空白
- 可选值：
- normal：正常
- nowrap：不换行
- pre：保留空白
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos provident quas a ratione reprehenderit hic omnis fugit, commodi eveniet quisquam quasi. Magnam molestias neque non possimus ut iusto doloremque voluptatum.</div>
<div class="box2">Never give up!<span class="s1">Never give up!</span></div>
<div class="box3">愿今生无悔，不负年华！</div>
<div class="box4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi eos, harum unde illo officia at explicabo impedit. Laboriosam laborum similique distinctio, quas, at incidunt labore nesciunt libero tenetur enim autem.</div>
</body>
</html>