字体图标的制作方法

Posted 2020-09-20 雨晴闹闹

1.图标的制作:

原料是需要有标准的svg图标
知乎引导教程:http://www.zhihu.com/question/29054543
实际操作的第三方网站:https://icomoon.io/app/#/select,类似网站还有http://iconfont.cn(隶属阿里,需要注册)
在网站上传svg文件,然后可以下载到打包的其他格式的文字文件及对应的demo;

2.使用

/* 字体声明部分,声明为jdf*/

        @font-face {

          font-family: ‘jdf‘;

          src:  url(‘fonts/jdf.eot?cfnq6a‘); /* IE9*/

          src:  url(‘fonts/jdf.eot?cfnq6a#iefix‘) format(‘embedded-opentype‘),/* IE6-IE8 */

            url(‘fonts/jdf.ttf?cfnq6a‘) format(‘truetype‘),/* chrome、firefox、opera、Safari, android, ios 4.2+*/

            url(‘fonts/jdf.woff?cfnq6a‘) format(‘woff‘), /* chrome、firefox */

            url(‘fonts/jdf.svg?cfnq6a#jdf‘) format(‘svg‘);/* iOS 4.1- */

          font-weight: normal;

          font-style: normal;

        }

        调用:

        .class{

          /* use !important to prevent issues with browser extensions that change fonts */

          font-family: ‘jdf‘ !important;

          speak: none;

          font-style: normal;

          font-weight: normal;

          font-variant: normal;

          text-transform: none;

          line-height: 1;

        /*由于字体图标存在半个像素的锯齿，在浏览器渲染的时候直接显示一个像素了，导致在有背景下的图标显示感觉加粗；所以在应用字体图标的时候需要对图标样式进行抗锯齿处理 */

          -webkit-font-smoothing: antialiased;

          -moz-osx-font-smoothing: grayscale;

        }

不考虑ie67的话可以使用伪类,完全使用样式即可搞定

.icon-c:before {

            content: "\e900";

        }

           
如果是兼容ie67,需要在dom中写入文字代码,类似<i class="c_iconfont">&#xe900;</i>

其中的"900"字符再制作流程中是这个网站是用递增的方式给生成的,类似&#xe902;同样的图标,每构建一次,编号可能不一样的,所有再次"回炉"删减,再次打包下来的时候注意这个坑!
这个代码可以查看最终打包下载文件中的demo样式里面的content值,如果不确定,可以在字体在线生成操作流程中的最后一步每个icon上都有一个getcode按钮点击查看对应的详细信息

一些特殊处理:
a.如果ie7下右侧出现小方框,那么需要设置display: block;
b.如果锯齿特别严重,webkit支持边缘模糊-webkit-text-stroke-width: 0.2px;
c.android和ios也都有响应的方法来使用icon字体图标,具体使用自行查资料

3.如果想从电脑上的字体中或者设计人员提供的psd配套的字体中挑几个已经在使用的字体制作城icon-font,可以走以下流程

a.把整个字体文件进行格式转换,转成其他几种web支持的格式,需要借助第三放网站,这里有两个
http://www.font2web.com/(字体文件不得超过512k)
https://www.web-font-generator.com
字体需要是ttf格式,未探寻fon格式的字体转换格式的方法
b.上步骤得到了.eot,.ttf,.woff,.svg,虽然已经得到了web字体,但是他们依然非常大,三五兆,七八兆左右.依然不适合使用.
但是因为得到了svg文件,可以把svg传到网站https://icomoon.io/app/#/select,然后网站有"挑字"的操作,把需要使用的几个字或者图标挑出来,生成自定义的字体文件,这样得到的一套字体文件就非常小了,可以使用了.

4.png转svg简易流程(流程只是跑通,并不完美,欢迎psai大神进一步完善):

ps:
放大--魔术棒选中--右键新建工作路径--路径面板--前景色填充--裁剪--导出--ai
ai:
放大,锚点密集处反复用平滑工具拖动--特殊锚点使用白箭头选中后拖拉--选中路径,前景色面板取色填充--导出svg,合并path纯色--完毕