前端之HTML，CSS（十一）

　　字体图标

　　使用文字做出小图标的效果并超越了小图标应用精灵图，使得图标变得灵活，减少了请求次数，优化了界面的性能。字体图标本身为矢量图。

　　字体图标的使用过程

　　1.UI设计字体图标效果图

　　使用illustrator或者Sketch矢量图软件创建icon图标，并保存svg格式。

　　2.前端上传生成兼容性字体文件包

　　将svg格式文件转换成页面能够使用的字体文件，并且需要兼容各种浏览器。

　　icomoon字库：https://icomoon.io/

　　阿里妈妈字库：https://www.iconfont.cn/

　　3.前端下载兼容字体文件包至本地

　　icomoon字库简单使用教程

　　1.打开icomoon字库页面以后，点击IconMoon APP

2.点击IcoMoon APP 以后，选择自己想要的图标，可以多项选择。

3.选择好图标以后，找到页面右下角处的Generate Font生成字体

4.点击Generate Font以后，页面跳转后，右下角处变为Dowmload

5.点击Download下载，下载完成以后，找到下载后的文件夹。

　　4.字体文件包引入HTML页面

　　1.解压下载好的文件夹。

2.打开icomoon文件夹，找到fonts文件夹

3.复制fonts文件夹到自己的项目文件中

4.页面中声明并调用字体图标

         @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?7kkyc2') format('truetype'),

               url('fonts/icomoon.woff?7kkyc2') format('woff'),

               url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');

           font-style: normal;

         }

         span {

             font-family: "icomoon";

         }

　　5.找到解压后文件夹icomoon中的demo.html

6.浏览器打开，复制所用字体图标后的小方块

7.将复制的小方块粘贴在页面所需位置

8.保存，浏览器打开页面

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>字体图标-测试</title>

     <style type="text/css">

         @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?7kkyc2') format('truetype'),

               url('fonts/icomoon.woff?7kkyc2') format('woff'),

               url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');

           font-style: normal;  /*倾斜字体正常*/

         }

         span {

             font-family: "icomoon";  /*与声明中font-family相同 */

             font-size: 100px;  /*设置字体图标大小*/

             color: red;

             font-style: normal;

         }

     </style>

 </head>

 <body>

     <span></span>

 </body>

 </html>

认识CSS中字体图标的更多相关文章

  1. 有关CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  2. CSS中字体尺寸总结

    下面是我总结的css中关于字体尺寸的知识,欢迎高手拍砖! 前端开发过程中,我们经常会遇到设置某个div固定显示几行文本:这时我们需要精确计算每个字号字体的宽度和高度. 下面是w3school中描述的尺 ...

  3. CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  4. css中字体大小在不同浏览器兼容性问题

    css中使用font-size设定字体大小,不同浏览器的字体height一样,但是width不同,比如在火狐和谷歌中,font-size:20px,字体的高度变为20px,但是谷歌的字体宽度比火狐长 ...

  5. css中字体单位px,pt,em,百分比之间的区别和用法

    px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素htm ...

  6. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  7. css 中字体大小

    css属性font-size可以用来设置字体的大小, 可是有时候看到大小的设置是font:bold 20px/24px Verdana, Geneva, sans-serif; 这里的20px/24p ...

  8. css中字体属性的简写

  9. CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不同的字体

    font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...

随机推荐

  1. 百度地图 Javascript API 笔记

    因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...

  2. Spring3.x错误----java.lang.ClassNotFoundException：org.aopalliance.inter.MethodInterceptor

    Spring3.x错误: 解决方法: 发现MethodInterceptor确实不存在,发现少了个jar包,aopalliance-1.0.jar 参考: http://blog.csdn.net/s ...

  3. RocketMQ 服务器3模式

    22 a b-s---------------------------sh mqbroker -c $ROCKETMQ_HOME/conf/2m-2s-async/broker-a.propertie ...

  4. 深入浅出CSS：Div（一）

    这个系列是学习笔记,简明记录结论性的知识. 新建一个层时,border为零,margin为0,padding为0,如果不指定宽度(width),则自动100%填充父元素. 三.层与父元素的关系 1. ...

  5. VR眼镜和AR眼镜的区别

    VR眼镜是纯虚拟的世界建模,不结合现实世界.(VR一体机和手机VR眼镜是不同的,不只是是不是以手机为载体播放器的问题,而是它们结构上也有很大的区别:另外还有一点就是电脑端VR,这个主要是游戏:http ...

  6. ZOJ2201 No Brainer 2017-04-16 19:21 54人阅读 评论(0) 收藏

    No Brainer Time Limit: 2 Seconds      Memory Limit: 65536 KB Zombies love to eat brains. Yum. Input ...

  7. 开通博客暨注册github事件

    (1) 姓      名:丁新宇 学      号:1413042054 班      级:网工142 兴趣爱好:听歌.看书.编代码. (2) GitHub注册流程: 1,百度搜索GitHub,进入官 ...

  8. nginx 内置参数

    $args #这个变量等于请求行中的参数.$content_length #请求头中的Content-length字段.$content_type #请求头中的Content-Type字段.$docu ...

  9. jenkins任务构建失败重试插件Naginator Plugin

    jenkins任务失败重新构建插件Naginator Plugin jenkins任务经常会因为一些偶然因素失败,这时重新构建一次就肯能成功:jenkins的Naginator Plugin插件可以重 ...

  10. 浅谈 温故知新——HTML5！

    古人有云:温故而知新.活到老,学到老,作为一枚前端的程序猿,不停的学习能够让我们对我们的技术有一个更加丰富的认识.这几天,项目已经完成,但我发现自己的知识体系存在一些短板,特别是在H5方面,所以我又回 ...