HTML里面的font&background总结及源代码

小付学前端

已于 2022-07-13 22:01:04 修改

阅读量760

点赞数 1

分类专栏： HTML5详细基础笔记文章标签：前端 css html5 html

于 2022-07-13 22:00:20 首次发布

本文链接：https://blog.csdn.net/weixin_58264104/article/details/125769926

版权

01-字体

字体相关的样式：

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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.字体</title>
    <style>
        /* font-face 可以将服务器中的字体直接提供给用户去使用
          问题：
             1.加载速度
             2.版权
             3.字体的格式

       */
        @font-face {
            /* 指定字体的名字 */
            font-family: 'mayfont';
            /* 服务器中字体的路径 */
            /* format 告诉浏览器这个字体格式是truetype，通过这个格式去解析，确保浏览器可以识别，但是不是必要的 */
            src: url('./font/ZOCCLKuaiLe-Regular.ttf') format(truetype);
        }


        p {
            /* 
            字体相关的样式：
                color 用来设置字体颜色
                font-size 字体的大小
                  和font-size相关的单位
                  em 相当于当前元素的一个font-size
                  rem 相当于根元素的一个font-size
            font-family  字体族（字体的格式）
                可选值：
                   serif 衬线字体
                   sans-serif 非衬线字体
                   monospace 等宽字体
                       -指定字体的类别，浏览器会自动使用该类别下的字体

            -font-family 可以同时指定多个字体，多个字体间使用，隔开
               字体生效使优先使用第一个，第一个无法使用则使用第二个 以此类推
            */
            color: red;
            font-size: 40px;

            font-family: 'Courier New', Courier, monospace';

        }
    </style>
</head>

<body>
    <p>
        今天天气真不错，Hello Hello How are you！
    </p>
</body>

</html>

02图标字体

图标字体（iconfont）

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

但是图片大小本身比较大，并且非常不灵活

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

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

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

fontawesome 使用步骤

1.下载 https://fontawesome.com/

2.解压

3.将css 和 webfonts移动到项目中

4.将all.css引入到网页中

5.使用图标字体

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

class=“ fas fa-bell”

class="fab fa-accessible-icon"

<!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>02.图标字体</title>
    <link rel="stylesheet" href="./fa/css/font-awesome.css">
</head>
<body>
    <!-- 
       图标字体（iconfont）
         -在网页中经常使用一些图标，可以通过图片来引入图标
           但是图片大小本身比较大，并且非常不灵活
        -所有在使用图标时，我们还可以将图标直接设置为字体，
           然后通过font-face 的形式来对字体进行引入
        -这样我们就可以通过使用字体的形式来使用图标


        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" style="font-size: 80px; 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: 160px; color:green;"></i> -->
</body>
</html>

03 图标字体使用的其他方法

通过伪元素来设置图标文件

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

2.在content中设置字体的编码

3.设置字体的样式

fab

font-family:'Font Awesome 5 Brands';

fas

font-family:'Font Awesome 5 Free';

font-weight:900;

<!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>03.图标字体的其他使用方法</title>
    <link rel="stylesheet" href="./fa/css/font-awesome.css">
    <style>
        li{
            list-style: none;
        }

        li::before{
            /* 
            通过伪元素来设置图标文件
               1.找到要设置图标元素通过before或after选中
               2.在content中设置字体的编码
               3.设置字体的样式
                 fab
                  font-family:'Font Awesome 5 Brands';

                  fas
                  font-family:'Font Awesome 5 Free';
                  font-weight:900;
            */
            content: \f1b0;

            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!--