html字体图标设置

最新推荐文章于 2024-04-11 17:46:50 发布

喵俺第一专栏

最新推荐文章于 2024-04-11 17:46:50 发布

阅读量2.1k

点赞数 1

分类专栏： # html练习文章标签： html css 前端

本文链接：https://blog.csdn.net/dengfengling999/article/details/122629479

版权

html练习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

精灵技术：

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度

精灵技术主要针对背景图片的使用，就是把多个小的背景图片整合到一张大图片中

1精灵图主要针对于小的背景图片的使用

2主要借助背景位置来实现background-position

3一般情况下精灵图都是负值 x轴右边走是正值

字体图标：iconfont

使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图有缺点：

图片文件还是较大、图片本身方法和缩小会失真、一旦图片制作完完毕想要更换非常复杂

字体图标解决了上述问题，展示的是图标，本质属于字体

优点

轻量级：一个图标比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少服务器请求

灵活性：本质是文字，可以随便改变颜色，产生阴影，透明效果，旋转

兼容性：几乎支持所有浏览器

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

1.字体图标的下载：

2.把下载好的包里面的fonts文件夹放入页面根目录下

2.在css样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中，一定注意字体文件路径问题

3.在htnl标签中添加小图标 span使用字体图标，在span标签中添加的不是普通的文字，添加的是下载好的文件夹中domo.html中找到小方框赋值到span中

4.给span设置字体，设置CSS样式 font-family: 'icomoon';

字体图标的追加和加载：

如果工作中字体图标不够用了，我们需要添加新的字体图标到原来的文件夹中。

把压缩包里里面的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件夹

<!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: 'icomoon';
            src: url('fonts/icomoon.eot?unghpc');
            src: url('fonts/icomoon.eot?unghpc#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?unghpc') format('truetype'),
                url('fonts/icomoon.woff?unghpc') format('woff'),
                url('fonts/icomoon.svg?unghpc#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
            font-size: 100px;
            color: pink;
        }
    </style>
</head>

<body>
    <span></span>
    <span></span>
</body>

</html>

结果：

喵俺第一专栏

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
html字体图标设置

精灵技术：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度精灵技术主要针对背景图片的使用，就是把多个小的背景图片整合到一张大图片中1精灵图主要针对于小的背景图片的使用2主要借助背景位置来实现background-position3一般情况下精灵图都是负值 x轴右边走是正值字体图标：iconfont使用场景：主要用于显示网页中通用、常用的一些小图标精灵图有缺点：图片文件还是较大、图片本身方法和缩小会失真、一旦图片制作完完毕想要更换非常复杂字体图标解决了上述问题
复制链接

扫一扫