前端之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. Quartz2D Text

    [Quartz2D Text] Quartz 2D provides a limited, low-level interface for drawing text encoded in the Ma ...

  2. Java并发艺术-CAS

    前言 CAS(Compare and Swap),即比较并替换,实现并发算法时常用到的一种技术,Doug lea大神在java同步器中大量使用了CAS技术,鬼斧神工的实现了多线程执行的安全性. CAS ...

  3. DE0-Nano-SoC开发板诡异的电源电路方案设计分析

    这些日子一直在设计自己的Cyclone V SoC开发板,由于我们这种散兵游勇,是断然没有厂家和代理技术支持的,因此只能找各种现成方案参考.其实Cyclone V SoC芯片的外围电路设计不难,无非就 ...

  4. (转)JDBC模板类。

    Spring JDBC抽象框架core包提供了JDBC模板类,其中JdbcTemplate是core包的核心类,所以其他模板类都是基于它封装完成的,JDBC模板类是第一种工作模式. JdbcTempl ...

  5. zTree设置选中节点之后出现重复节点

    1.用户离开页面时最后一次点击的节点信息我会保存到数据库. 2.用户打开页面时默认选中上一次离开时选中的节点. 现在发现在设置选中节点之后,会出现重复的节点(重复现象偶尔出现). 以下是代码: var ...

  6. [C#学习笔记]C#中的decimal类型——《CLR via C#》

    System.Decimal是非常特殊的类型.在CLR中,Decimal类型不是基元类型.这就意味着CLR没有知道如何处理Decimal的IL指令. 在文档中查看Decimal类型,可以看到它提供了一 ...

  7. 云捕Redis实战

    本文由作者余宝虹授权网易云社区发布. Redis是一个支持丰富数据结构的分布式key-value系统,Redis在云捕系统的地位相当重要,碰到的问题也比较多,最近才解决了一个遗留的老大难问题.由于15 ...

  8. http协议与https协议的区别

    1.前言 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可 ...

  9. 八.linux系统文件属性知识

    1.文件属性权限是12位,现在只看9位,其中每3个一组,为:属主权限.属组权限.其他权限,其中r可读,w可写,x可执行,如图: 2.文件属性之软硬链接   linux系统中有两种链接,为硬链接(ln) ...

  10. C# 键盘中的按键对应KeyValue

    首先先看一下什麼情況下需要對按鍵進行識別: KeyPress事件響應函數中,有KeyPressEventArgs, 對應於e.KeyChar; KeyDown事件響應中有KeyEventArgs 求取 ...