前端之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. Android Studio真机测试

    本页内容 1.真机测试好处多 2.开始吧!真机测试 1.真机测试好处多 不久前才开我的Android Studio之旅,就遇上了一个大麻烦——创建的模拟器各种运行出错.尝试了各种解决方法,都没有什么结 ...

  2. C#分布式事务解决方案-TransactionScope(转)

    出处:C#分布式事务解决方案-TransactionScope 引用一下别人的导读:在实际开发工作中,执行一个事件,然后调用另一接口插入数据,如果处理逻辑出现异常,那么之前插入的数据将成为垃圾数据,我 ...

  3. Oracle学习笔记(三)

    五.操作表 1.表分为行和列 约定:每行数据唯一性,每列数据同类性,每列列名唯一性. 2.数据类型 字符型 -- 固定长度的字符类型 字符类型:CHAR(n)(MAX n=2000).NCHAR(MA ...

  4. Selenium Webdriver定位元素的几种方式

    原文:http://www.cnblogs.com/tobecrazy/p/4570494.html 工作中使用到记录一下. 主要有: 上传 alter dialog prompt dialog co ...

  5. canvas里调用getImageData的报security的问题

    canvas元素支持绘制任意图片元素: var ctx = document.getElementById("canvas").getContext("2d") ...

  6. intrinsicConditionQueue笔记

    一, 使用conditionQueue需要注意的一些点: 一个conditionQueue被多种Predicate condition 使用是很正常的,所以当一个wait的线程被唤醒的时候,很有可能它 ...

  7. 使用MATLAB一键制作mif文件

    本文档主要讲解实现一个16384(2^14)点的14位正弦波数据mif格式文件的生成,使用此文件,我们便可以在FPGA上基于直接数字合成(DDS)原理生成标准的正弦波,即实现信号发生器的功能.关于DD ...

  8. [label][WorldPress] 一个很方便查找定位WorldPress源代码位置的网址

    作为 WordPress 的新手,根本不熟悉那些函数究竟是什么作用的,所以就必须要去看源代码. 要去查看源代码,那么你就必须要熟悉 WordPress 下面文件的作用,以及那个文件中定义了有哪些函数? ...

  9. DATASNAP远程方法返回TSTREAM正解

    DATASNAP远程方法返回TSTREAM正解 DATASNAP远程方法返回TSTREAM,如果数据大小超过32K是会报错的.许多DELPHIER栽在这个上头,甚至开始怀疑TSTREAM返回数据的可行 ...

  10. Lucene教程(四) 索引的更新和删除

    这篇文章是基于上一篇文章来写的,使用的是IndexUtil类,下面的例子不在贴出整个类的内容,只贴出具体的方法内容. 3.5版本: 先写了一个check()方法来查看索引文件的变化:   /**   ...