CSS字体图标的使用

2023-10-10 14:52:52

文章目录

1、字体图标

1、字体图标

1.1、字体图标的产生

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

二、精灵图有诸多优点，但缺点也很明显：

图片文件相对较大。
图片本身放大和缩小会失真。
图片制作完毕想要更换相对复杂。

三、为了解决上述问题，有一种技术就是字体图标iconfont。

字休图标为前端开发人员提供了一种方便高效的图标使用方式，展示的是图标，本质属于字体。

四、字体图标的优点

轻量级：一个图标字体要比图像小。一旦字体加载，图标马上渲染，减少了服务器请求.
灵活性：本质是文字，可以随意更改颜色、产生阴影、透明效果、旋转等。
兼容性：几乎支持所有浏览器。

注意：字体图标不能完全替代精灵图。

1.2、字体图标的使用

1.2.1、字体图标的下载

icomoon字库：http://icomoon.io
icoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，唯一的遗憾是国外服务器，打开速度较慢。
阿里iconfont字库：http://www.iconfont.cn
阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。重点，免费。

1.2.2、字体图标的下载

一、进入http://icomoon.io，点击【IcoMoon App】

二、选择自己需要的图标，点击【Generate Font】生成字库

三、预览自己选中的字体图标，点击【Download】下载

四、解压后得到下图中的文件。

五、style.css中的@font-face可以在style标签中声明字体。

六、demo.html中可查看每个图标的表示方法

1.2.2、字体图标的引入

把下载好的字体图标文件里的fonts文件夹放入页面根目录
在CSS样式中全局声明字体：把style.css中的@font-face复制到style标签中。
一定注意字体路径的问题。

<style>
    @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.eot?mqxkex');
        src: url('fonts/icomoon.eot?mqxkex#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?mqxkex') format('truetype'),
            url('fonts/icomoon.woff?mqxkex') format('woff'),
            url('fonts/icomoon.svg?mqxkex#icomoon') format('svg');

        font-weight: normal;
        font-style: normal;
        font-display: block;
    }

    span {
        /*指定的定体要和声明的字体一致*/
        font-family: icomoon;
        font-style: 50px;
        color: red
    }
</style>


<span></span>

展示效果如下：

1.2.3、字体文体格式

fonts文件夹下包含四种格式如下：

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，是因为包含了主流浏览器支持的字体文件。

TureType（.ttf）格式：.ttf字体是Windows和Mac最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、IOSMobile\Safari4.2+
Web Open Font Format（.woff）格式：.woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Sfari3.6+、Opera11.1+
Embedded Open Type（.eot）格式：.eot字体是IE志用字体，支持这种字体的浏览器有IE4+;
SVG（.svg）格式：.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、IOSMobile Safari3.2+

1.2.1、字体图标的追加

把selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件即可。
一、点击【import icons】，上传selection.json文件。

二、上传成功，展示之前选择的图标，见下图。

三、重新添加或删除图标后，重新生成字库，即可。

码农公寓