字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式—

一、字体族

二、图标字体简介（font awesome的使用）

三、图标字体的其他使用方式

四、iconfont

五、行高

六、字体的简写属性

七、文本的水平和垂直对齐

八、其他的文本样式

九、综合案例——新闻页面

一、字体族

字体相关的样式

color 用来设置字体颜色

font-size 字体的大小

和 font-size 相关的单位

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

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

font-family 字体族（字体的格式）

可选值（字体类别，与微软雅黑、华文彩云等不同）

serif 衬线字体

sans-serif 非衬线字体

monospace 等宽字体

cursive 草书字体

fantasy 虚幻字体

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

- font-family 可以同时指定多个字体，多个字体间使用，隔开

字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

一般情况下，如果有空格隔开的多个单词组成的字体，加引号。

字体可不可以使用由用户的计算机中是否安装了该字体决定

字体在计算机中的位置：C盘——windows——fonts

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

问题：

1. 加载速度比较慢

2. 版权问题

3. 字体格式，如一般字体文件为.ttf

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>@font-face{/* 指定字体的名字，自己起的 */font-family:'myfont';/* 服务器中字体的路径 */src:url('路径')format('truetype') ;}p{color: red;font-size: 20px;font-family:'Courier New', Courier, monospace;/* 同时指定多个字体，使用逗号隔开，上面中第一个字体使用引号引起来的原因是该字体出现空格，引起来确保没问题对于包含空格以及特殊符号的应用引号引起来 *//* Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif; */           }</style>
</head>
<body><p>今天天气真不错，Hello Hello How are you!</p>
</body>
</html>

二、图标字体简介（font awesome的使用）

图标字体（iconfont）

- 在网页中经常需要使用一些图标，可以通过图片来引入图标

但是图片大小本身比较大，并且非常不灵活，如不能改颜色

- 所以在使用图标时，我们还可以将图标直接设置为字体，

然后通过font -face 的形式来对字体进行引入

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

- 展示的是图标，本质属于字体

font awesome 使用步骤：

1. 下载 Font Awesome （在英文官网上下载，比较新）

2. 解压

3. 将解压完的css 和 webfonts 移动到项目中，注意这两个文件必须在项目的同一级目录下

4. 将 all.css 引入到网页中，使用 link 标签引入，

如<link rel="stylesheet" href="./fontawesome/css/all.css">

5. 使用图标字体

- 直接通过类名来使用图标字体 class="fas fa-bell"

第一个类fas 是固定的，后边的是要的图标的类名，但不是所有的图标都是fas

如轮椅的为fab class="fab fa-accessible-icon"

主要有两个类fas fab，fas不行就是用fab

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 将 all.css 引入到网页中 --><link rel="stylesheet" href="./fontawesome/css/all.css">
</head>
<body><!-- i标签为斜体，但是现在一般使用 i 标签来表示图标字体 --><i class="fas fa-bell" style="font-size:40px; color:red;"></i><i class="fas fa-bell-slash"></i><i class="fab fa-accessible-icon"></i><i class="fas fa-otter" style="font-size: 100px; color:blue"></i>
</body>
</html>

三、图标字体的其他使用方式

看项目中的文件如<link rel="stylesheet" href="./fontawesome/css/all.css"> 使用Ctrl + 单击

图标字体的其他使用方式：

通过伪元素来设置图标字体

1. 找到要设置图标的元素通过 ::before 或者 ::after选中

2. 在content 中设置字体的编码，反斜杠\ + 编码，字体的编码去文档中查询，在对应图标的右侧

3. 设置字体的样式

font-family:'Font Awesome 6 Free' 对应fas

font-family: 'Font Awesome 6 Brands' 对应fab，二者之一

font-weight: 900

通过实体来使用图标字体（实体为&开头，；结尾）

&#x图标的编码; 且应在元素加上类名fab、fas

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 将 all.css 引入到网页中 --><link rel="stylesheet" href="./fontawesome/css/all.css"><style>li{/* 去掉项目符号 */list-style: none;}li::before{content: '\f1b0';/*反斜杠+编码*/font-family: 'Font Awesome 6 Free';font-weight: 900;/* font-weight 必须写 */}</style>
</head>
<body><ul><!-- 为每个li设置图标，若直接使用类名的方式比价麻烦 --><li><i class="fas fa-star"></i>锄禾日当午</li><li>汗滴禾下土</li><li>谁知盘中餐</li><li>粒粒皆辛苦</li></ul><!-- 使用实体，&开头;结尾 ，图标编码前加 #x, 且必须写类名fab、fas--><span class="fas"></span>
</body>
</html>

四、iconfont

iconfont 图标库 iconfont-阿里巴巴矢量图标库

在使用之前要先注册登录才可使用，同时若在做项目使用该库中的图标时，最好联系作者确定版权问题

可以在素材库——官方图标库——选中图标加入购物车——将购物车中的图标添加至项目

然后资源管理——我的项目——点击下载至本地——将文件拷贝到桌面——在需使用图标的项目中创建文件夹——把文件复制到项目的文件夹中——对于 demo_index.html和demo.css两个文件，没用可以删掉

demo_index.html 是一个说明

然后就可以引用并使用三种方式使用图标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 将 iconfont.css 引入到网页中 --><link rel="stylesheet" href="./iconfont/iconfont.css"><style>.iconfont{font-size: 100px;}/* 使用元素选择器i 修改图标大小不起作用，是因为之前对该图标进行了设置而元素选择器的权重不如类选择器 *//* 使用伪元素选择器 */p::before{content:'\e625';font-family:'iconfont';/*使用iconfont库时font-family为iconfont*/font-size:100px;/**为图标设置大小，可以不写/}</style>
</head>
<body><!-- 通过实体的方式使用图标字体,且类名要设置为iconfont --><i class="iconfont"></i><i class="iconfont"></i><!-- 直接使用类名，第一个固定类名为iconfont --><i class="iconfont icon-ganlaji"></i><i class="iconfont icon-qitalaji"></i><!-- 使用伪元素选择器 --><p>Hello</p>
</body>
</html>

五、行高

行高（line-height）

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

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

行高可以直接指定一个大小（px em）

也可以直接为行高设置一个整数

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

默认行高为1.33倍字体

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

行间距 = 行高 - 字体大小

字体框

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

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{/* height: 200px; */font-size:50px;border: 1px red solid;line-height:200px;}</style>
</head>
<body><div>今天天气真不错! Hello Hello 今天天气真不错! Hello Hello 今天天气真不错! Hello Hello</div>
</body>
</html>

六、字体的简写属性

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

语法：

font: 字体大小/行高字体族

行高可以省略不写，如果不写会使用默认值，字体大小和字体族是必须要写的

字体大小和字体族前面还可以写字体的其他属性，如font-style font-weight

使用font时，若不写行高，但在之前使用line-height设置了行高，font的默认值会覆盖之前的,若想使line-height生效，应写在font 的下面

div{line-height: 100px;font: 50px 'Times New Roman',Times,serif;
}

font-weight 字重，字体的加粗

可选值：

normal 默认值不加粗，等价于400

bold 加粗，相当于700

100-900 九个级别（没什么用）高一个级别可能更粗

font-style 字体的风格

可选值：

normal 默认值正常的

italic 斜体

font-weight 和 font-style 同样不写时，使用默认值，若前面设置了会覆盖前面的

font的简写属性，对于没写的属性会使用默认值，会覆盖之前的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{border: 1px red solid;/* font-weight: bold;font-style: italic; *//* font-size:50px;font-family: 'Times New Roman',Times,serif; */font:bold italic 50px 'Times New Roman',Times,serif;/* font-weight: 900; */}</style>
</head>
<body><div>今天天气真不错! Hello Hello</div>
</body>
</html>

七、文本的水平和垂直对齐

text-align 文本的水平对齐

可选值：

left 左侧对齐

right 右侧对齐

center 居中对齐

justify 两端对齐

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

可选值：

baseline 基线对齐，默认值，子元素和父元素的基线对齐

top 顶部对齐

bottom 底部对齐

middle 居中对齐，将子元素的中线与父元素的x字母的中线对齐

还可以直接指定值

对于图片放在元素中时，图片与元素下边之间会有一个缝隙，这个缝隙就是图片的基线，这样对于布局会有影响，所以我们可以通过为图片设置vertical-align ，值可以为bottom,top都行，这样就可以使图片的基线不再是那个缝隙。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 500px;border: 1px red solid;text-align:left;}.box1{width: 500px;border: 1px red solid;font-size: 50px;}span{font-size: 20px;border: 1px solid blue;vertical-align:middle;/* 直接指定值 */vertical-align:10px;}p{border: 1px red solid;}img{vertical-align: bottom;}</style>
</head>
<body><div class="box1">今天天气 hello<span>真不错 Hello</span>！</div><div>This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings.</div><p><img src="./exercise/JS143练习的图片/白色1.jpg" alt=""></p>
</body>
</html>

八、其他的文本样式

text-decoration 设置文本修饰

可选值：

none 什么都没有(最常用)

underline 下划线，链接 a 自带下划线（常用）

line-through 删除线（不常用）

overline 上划线（几乎不用)

还可以直接在后面写颜色，表示线的颜色，但这个对于IE浏览器不支持

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

可选值：

normal 正常默认值

nowrap 不换行

pre 保留空白

为溢出的内容设置省略号，四个缺一不可：

width: px;

white-space:nowrap ;

overflow: hidden;

text-overflow: ellipsis;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box1{font-size: 50px;font-family: 微软雅黑;text-decoration:line-through red;}.box2{width: 200px;white-space:nowrap ;overflow: hidden;text-overflow: ellipsis;/* 对于溢出的内容设置省略号，以上四个值缺一不可width设置宽度white-space设置不换行overflow设置裁剪、text-overflow设置省略号 */}</style>
</head>
<body><div class="box2">This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings.</div><div class="box1">今天天气真不错</div>
</body>
</html>

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

如text-indent: 10px;

是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

text-indent: 2em 缩进当前元素2个文字大小的距离

九、综合案例——新闻页面

想要图片居中对齐，则是让它的父元素添加水平居中的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {font: 16px/28px 'Microsoft YaHei';}h1 {/* 文字不加粗 */font-weight: 400;/* 让h1文字水平居中对齐 */text-align: center;}.gray {text-align: center;font-size: 12px;color: #888;}a {text-decoration: none;color: blue;}.search {color: #666;width: 170px;}.btn {font-weight: 700;}p {text-indent: 2em;}.pic {/* 想要图片居中对其，则是让它的父元素 P标签添加水平居中的代码 */text-align: center;}.footer {color: #888;font-size: 12px;}</style>
</head>
<body><h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1><div class="gray"> 2019-07-03 16:31:47 来源: <a href="#">中国天气网</a> &nbsp;&nbsp;<input type="text" value="请输入查询条件" class="search"> <button class="btn">搜索</button></div><hr> <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p><h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4><p class="pic"><img src="./exercise/练习的截图/网易新闻.webp" alt=""></p><p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p><p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p><h4>明日热度再升级！京津冀携手冲击38℃+</h4><p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p><p> 不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p><p class="footer"> 本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>
</html>