【web前端HTML5+CSS3】06CSS--font（字体）&background（背景）

最新推荐文章于 2024-05-04 19:31:28 发布

西西歪歪西歪

最新推荐文章于 2024-05-04 19:31:28 发布

阅读量314

点赞数

分类专栏： css 文章标签： css3 前端 html5

本文链接：https://blog.csdn.net/weixin_58214412/article/details/123029134

版权

1.字体族

        /* 
        font-face可以将服务器中的字体直接提供给用户去使用 
            问题：
                1.加载速度
                2.版权
                3.字体格式
        
        */
        @font-face {
                /* 指定字体的名字 */
            font-family:'myfont' ;
            /* 服务器中字体的路径 */
            src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
        }

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

                    - font-family 可以同时指定多个字体，多个字体间使用,隔开
                        字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推

                        Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif


            */
            color: blue;
            font-size: 40px;

            /* font-family: 'Courier New', Courier, monospace; */
            font-family: myfont;
        }
    </style>
</head>
<body>
    <p>
        今天天气真不错，Hello Hello How are you！
    </p>
</body>
</html>

2.图标字体简介

<!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>
    <link rel="stylesheet" href="./fa/css/all.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>

3.图标字体其他使用方式

<!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>
    <link rel="stylesheet" href="./fa/css/all.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 Brands'; */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>

    <!-- <i class="fas fa-cat"></i> -->

    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>

    <!-- 

        通过实体来使用图标字体：
            &#x图标的编码;
     -->
    <span class="fas">&#xf0f3;</span>
    
</body>
</html>

4.阿里字体库

<!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>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        i.iconfont{
            font-size: 100px;
        }

        p::before{
            content: '\e625';
            font-family: 'iconfont';
            font-size: 100px;
        }
    </style>
</head>
<body>
    <!-- 使用方法和fontawesome字体库类似 -->
    <i class="iconfont">&#xe61c;</i>
    <i class="iconfont">&#xe622;</i>
    <i class="iconfont">&#xe623;</i>

    <i class="iconfont icon-qitalaji"></i>

    <p>Hello</p>
</body>
</html>

5.行高

<!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>
        div{
            font-size: 50px;

            /* 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中 */
            line-height: 200px;

            /* 
                行高（line height）
                    - 行高指的是文字占有的实际高度
                    - 可以通过line-height来设置行高
                        行高可以直接指定一个大小（px em）
                        也可以直接为行高设置一个整数
                            如果是一个整数的话，行高将会是字体的指定的倍数
                    - 行高经常还用来设置文字的行间距
                        行间距 = 行高 - 字体大小

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

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

            */

            border: 1px red solid;

            /* line-height: 1.33; */
            /* line-height: 1; */
            /* line-height: 10 */
        }
    </style>
</head>
<body>
    
    <div>今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello</div>

</body>
</html>

6.字体的简写属性

<!DOCTYPE ht

最低0.47元/天解锁文章

西西歪歪西歪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【web前端HTML5+CSS3】06CSS--font（字体）&background（背景）

目录1.字体族2.图标字体简介3.图标字体其他使用方式4.阿里字体库5.行高6.字体的简写属性7.文本的水平和垂直对齐8.文本的其他样式9.京东顶部导航练习10.背景（一）11.背景（二）12.背景重复练习13.按钮练习14.雪碧图15.线性渐变16.径向渐变17.电影卡练习1.字体族 /* font-face可以将服务器中的字体直接提供给用户去使用问题.
复制链接

扫一扫

专栏目录