JS制作字体图

最新推荐文章于 2024-07-09 15:50:19 发布

马优晨

最新推荐文章于 2024-07-09 15:50:19 发布

阅读量2.2k

点赞数 1

分类专栏：前端开发文章标签： JS制作字体图字体图 JS字体图前端字体图

本文链接：https://blog.csdn.net/qq_24147051/article/details/52577535

版权

前端开发专栏收录该内容

233 篇文章 27 订阅

订阅专栏

这里写图片描述

我们经常会在网页中看到很多小图标，其实这些图标大多数都不是图片，而是字体图。
制作字体图总共有三种办法：

第一种： CSS Sprite（美其名曰雪碧图, 精灵图）

第二种： font + HTML 进行制作

第三种： CSS+ font 进行制作

这里写图片描述

第一种：

主要使用两个属性，一个是background-image,和另一个属性backgroun-position.通过改变图片的位置，实现在对应的位置显示对应的图片。

优点：

1-节省了文件的体积和HTTP请求的次数（一般保存为png-24）
2-可以设置各种颜色的小图标

难点：

1-需要预先知道小图标的大小
2-需要知道小图标之间的距离
3-需求变更，维护很麻烦。

第二种：

需要引入字体通过@font-face;

第一步：登陆这个网站https://icomoon.io/app/#/select/font 这个网站
Import to Set导入（设计师的）SVG图片。

这里写图片描述

第二步：登陆这个网站https://icomoon.io/app/#/select/font （目前国内使用最多的字体网站），点击download下载字体图文件包。

这里写图片描述

下载下来效果
这里写图片描述
选择里面.woff文件

将@font-face中的src路径替换，或者在工程中，SRC路径引入.woff文件。【下面代码中概述】

第三步
接下来我们先写写代码：
首先是CSS代码啦~~
这里我们要知道一个引入字体模式长什么样子：

        @font-face{
          Font-family:<family-name>;
          src:[<url>[format<string>#]?|<font-face-name>]#;
          Font-weight:<weight>;
        Font-style:<style>
        }

举例：

         @font-face{
              font-family:”font-name”;
              src:url(“../fonts/font-name.eot”);
              src:url(“../fonts/font-name.eot”)formate(“embedded-opentype”),
                  url(“../fonts/font-name.woff”).formate(“woff”),
                  url(“../fonts/font-name.svg”).formate(“svg”);
              font-weight:normal;
              font-style:normal;
            }

上面的font-name是字体的名字，这里可以自己随便取（开玩笑的，名字尽量有意义就可以）。src是需要引入的字体的路径，就在上面进行了说明。Font-weight以及Font-style如果没有什么特殊的要求，一般都设置成normal。

这里要注意一点：浏览器兼容，如果需要 IE6兼容的话eot后面要加?#iefix如下面所示（脑补箭头指向了下方）

            @font-face{
                      font-family:”font-name”;
                      src:url(“../fonts/font-name.eot”);
                      src:url(“../fonts/font-name.eot?#iefix”)formate(“embedded-opentype”),
                          url(“../fonts/font-name.ttf”).formate(“truetype”),
                          url(“../fonts/font-name.svg”).formate(“svg”);
                        font-weight:normal;
                        font-style:normal;
                    }

第四步
这里还是CSS代码啦~~
我们需要在类里面，引入我们在网站上下载下来的字体。

            .font-name{
                   Font-family:font-name;
                   Font-weight:normal;
                   Font-style:normal;
                   Font-size:16px;
                   -webkit-font-smoothing: antialiased;
                   -moz-osx-font-smoothing:grayscale;
                }

对于Font-family这个字体，当然是需要引入，我们起名字那个font-name啦，要不字体不是白白下载了，然后在font-name类中（这个是HTML里面的Class喔，别搞混了），设置你需要的属性，大纲已经写在上面了，请自行修改。

第五步

找我们的页面，使用字体图~~~~
这里记住：字体前面一定要加上￥#X 才可以显示

            <link rel=”stylesheet” href=”CSS路径”>
            <body>
              <ul>
                <li><a href=””><i class=”font-name”>&#xf048</i></a></li>
                <li><a href=””><i class=”font-name”>&#xf049</i></a></li>
                <li><a href=””><i class=”font-name”>&#xf050</i></a></li>
                <li><a href=””><i class=”font-name”>&#xf051</i></a></li>
            </ul>
            </body>

对于xf048，xf049这些东东，你只需填到对应的元素里面即可，他们的值是怎么来的？？？这个呀，要不你再看看原来那个网站，是自己生成的啊，而且你还可以修改吆。
这里写图片描述

第三种：

CSS+font（CSS引入font字体，主要是利用:before属性在元素前面加内容，用\进行转译，然后再HTML中添加字体设置的类）
这里就不在讲述了，有兴趣同学可以自己搜索相关资料。

          本文是作者自己在项目开发中心得体会，无任何广告宣传，转载请注明出处。

马优晨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS制作字体图

第一种： CSS Sprite（美其名曰 雪碧图, 精灵图）

第二种： font + HTML 进行制作

第三种： CSS+ font 进行制作

第一种：

优点：

难点：

第二种：

第三种：

第一种： CSS Sprite（美其名曰雪碧图, 精灵图）