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

嘻嘻哈哈二郎神

已于 2023-02-13 09:48:00 修改

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： css html 前端

于 2022-12-20 16:17:57 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/128378551

版权

CSS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

一、字体族

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

一、字体族

字体相关的样式

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">&#xf0f3;</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">&#xe61c;</i>
    <i class="iconfont">&#xe622;</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>