尚硅谷web前端——CSS（五）

最新推荐文章于 2022-11-29 12:32:11 发布

啾比特

最新推荐文章于 2022-11-29 12:32:11 发布

阅读量104

点赞数

分类专栏： Java web

本文链接：https://blog.csdn.net/qq_46258819/article/details/107850662

版权

Java web 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

CSS（五）

一、字体族 font-family

1、可选值

serif 衬线字体
sans-serif非衬线字体
monospace 等宽字体确保每个字体宽度是一致的

2、用于指定字体类别，浏览器会自动使用该类别下的字体，可以同时指定多个字体，使用“，”隔开，优先使用第一个
3、@font-face可以将服务器中气体直接提供给用户使用
存在的问题：

加载速度慢
字体切换会出现闪烁
版权问题

二、图标字体 iconfont

1、将图标直接设置为字体，通过font-face 的形式对字体进行引入
2、使用步骤：

下载 http://fontawesome.com/
解压
将css和webfonts 移动到项目中，必须在同级目录
将all.css引入到网页中
使用图标字体：直接通过类名来使用图标字母 < i class=‘fas fa-bell’ >
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>

在这里插入图片描述

啾比特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
尚硅谷web前端——CSS（五）

CSS（五）文章目录一、字体族 font-family二、图标字体 iconfont一、字体族 font-family1、可选值serif 衬线字体sans-serif非衬线字体monospace 等宽字体确保每个字体宽度是一致的2、用于指定字体类别，浏览器会自动使用该类别下的字体，可以同时指定多个字体，使用“，”隔开，优先使用第一个3、@font-face可以将服务器中气体直接提供给用户使用存在的问题：加载速度慢字体切换会出现闪烁版权问题二、图标字体 iconfont
复制链接

扫一扫

专栏目录