任务2-7(服务器字体+阿里巴巴矢量库)

最新推荐文章于 2024-08-11 06:13:52 发布

weixin_46137837

最新推荐文章于 2024-08-11 06:13:52 发布

阅读量68

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_46137837/article/details/119642896

版权

本文介绍了如何在网页中使用自定义字体和阿里巴巴矢量库来增强页面视觉效果。首先展示了如何通过@font-face规则加载自定义字体，并在HTML中应用。接着详细说明了从阿里巴巴矢量库获取图标并将其整合到网页中的两种方法。示例代码展示了底部导航栏的实现，利用矢量图标增强了用户体验。

摘要由CSDN通过智能技术生成

1. 服务器字体

@font-face

@font-face{ font-family:自定义名称;src:字体源}

<!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>
        @font-face{
            font-family: 'tu';
            src: url('QianTuXiaoTuTi/QianTuXiaoTuTi-2.ttf');
        }
        p{
            font-family: 'tu';
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <p>
        明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。
        七八个星天外，两三点雨山前。旧时茅店社林边，路转溪桥忽见。
    </p>
</body>
</html>

在这里插入图片描述

2. 阿里巴巴矢量库

1.在网页中搜索电影,出现图标,点击添加入库

在这里插入图片描述

 2.点击购物车,下载代码,得到压缩包
 3.解压文件,找到demo_index.html打开,得到使用教程

仿卖座底部导航栏:

第一种方式:

<!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>仿卖座底部导航栏</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('download/iconfont.ttf?t=1628749907478') format('truetype');
        }

        *{
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }
        body{
            background-color: #ccc;
        }
        nav {
            width: 100%;
            height: 60px;
            background-color: white;
            border: 1px solid gray;
            position: fixed;
            bottom: 0;
        }
        ul {
            height: 100%;
            display: flex;
            justify-content: space-around;
        }
        li {
            text-align: center;
        }
        li p:nth-of-type(1) {
            font-family: 'iconfont';
            font-size: 25px;
            margin-top: 5px;
        }
        li:nth-of-type(1){
            color: red;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>
                <p>&#xe62e;</p>
                <p>电影</p>
            </li>
            <li>
                <p>&#xe8c0;</p>
                <p>影院</p>
            </li>
            <li>
                <p>&#xe602;</p>
                <p>资讯</p>
            </li>
            <li>
                <p>&#xe64f;</p>
                <p>我的</p>
            </li>
        </ul>
    </nav>
</body>
</html>

第二种方式

<!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>仿卖座底部导航栏</title>
    <link rel="stylesheet" href="download/iconfont.css">

    <style>

        *{
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }
        body{
            background-color: #ccc;
        }
        nav {
            width: 100%;
            height: 60px;
            background-color: white;
            border: 1px solid gray;
            position: fixed;
            bottom: 0;
        }
        ul {
            height: 100%;
            display: flex;
            justify-content: space-around;
        }
        li {
            text-align: center;
        }
        li p:nth-of-type(1) {
            font-family: 'iconfont';
            font-size: 25px;
            margin-top: 5px;
        }
        li:nth-of-type(1){
            color: red;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>
                <p class="iconfont icon-dianying"></p>
                <p>电影</p>
            </li>
            <li>
                <p class="iconfont icon-yingyuan"></p>
                <p>影院</p>
            </li>
            <li>
                <p class="iconfont icon-xiaoxiicon"></p>
                <p>资讯</p>
            </li>
            <li>
                <p class="iconfont icon-tubiao-"></p>
                <p>我的</p>
            </li>
        </ul>
    </nav>
</body>
</html>

weixin_46137837

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
任务2-7(服务器字体+阿里巴巴矢量库)

1. 服务器字体@font-face@font-face{ font-family:自定义名称;src:字体源}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
复制链接

扫一扫