欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

字体图标

程序员文章站 2024-02-16 23:32:04
...

字体图标

图片是由诸多的优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”
者都会大大降低网页的性能的。更重要的是图片不能很好地进行“缩放”，此时，一个非常重要的技术出现了，
额不是出现了，是以前就有，是被从新“宠幸”啦。。这就是字体图标（iconfont）。

1. 字体图标优点

可以做出跟图片一样可以做的事情，改变透明度、旋转度、等...
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
本身体积更小，但携带的信息并没有削减。
移动端设备必备良药...

2. 字体图标使用流程

总体来说，字体图标按照如下流程：

字体图标

3. 设计字体图标

加入图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在illustrator
或sketch这类矢量图形软件里创建icon图标。

比如下图：

字体图标

 之后保存为svg格式，然后给我们前端人员就好了。
 其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，
 可以直接跳过第一步，进入第三步。

4. 上传生成字体包

当UI设计人给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的
适合各个浏览器的。

推荐网站： http://icomoon.io

1.icomoon字库
icomoon成立于2011年，推出的第一个自定义图标生成器，它允许用户选择他们所需要的图标，使它们成一字型。
内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

推荐网站： http://www.iconfont.cn/

2. 阿里iconfont字库

http://www.iconfont.cn

这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。
可以使用AI制作图标上传生成一个字，免费，免费。。。

5. 下载兼容字体包

刚才上传完毕，网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了。
当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了，直接到刚才的网站上找
喜欢的下载使用吧。

6. 字体引入到HTML

得到压缩包之后，我们得知字体图标本质就是字体文件。注意这个压缩包不要删除，我们后面还有用的。

字体图标

最后一步，是最重要的一步了，就是字体文件已经有了，我们需要引入到我们页面中。

1. 首先把fonts文件夹放到我们根目录下。

字体图标

2. html标签内里面添加结构

字体图标

 <span></span>
3. 在样式里面声明字体：告诉别人我们自己定义的字体（一定注意字体文件路径的问题）
@font-face{
                    font-family:'icomoon';
                    src: url('fonts/icomoon.eot?7kkyc2');
                    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                        url('fonts/icomoon.ttf?7kkc2') format('truetype'),
                        url('fonts/icomoon.woff?7kkc2') format('woff'),
                        url('fonts/icomoon.svg?7kkc2#icomoon') format('svg');
                    font-weight: normal;
                    font-style: normal;
                }
4. 给盒子使用字体
span {
                    font-family: "icomoon";
                }

7. 追加字体图标

如果工作中，原来的字体不够用了，我们需要添加新的字体图标，但原来的不能删除，继续使用，
此时我们需要这样做。
把压缩包里面的selection.json从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件
即可。

字体图标

接下来看看案例

命令示例：

<!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>
         @font-face{
                    font-family:'icomoon';
                    src: url('fonts/icomoon.eot?7kkyc2');
                    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                        url('fonts/icomoon.ttf?7kkc2') format('truetype'),
                        url('fonts/icomoon.woff?7kkc2') format('woff'),
                        url('fonts/icomoon.svg?7kkc2#icomoon') format('svg');
                    font-weight:normal;
                    font-styl:normal;
                }
        span,
        div,
        strong{
            font-family: 'icomoon';
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <span></span>
    <div></div>
    <strong></strong>
</body>
</html>

网页效果图：

字体图标

只用于学习与交流！！！

上一篇： Android编程实现自定义toast示例

下一篇： Bootstrap字体图标

推荐阅读