前端之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. FW:考查嵌入式C开发人员的最好的16道题(转)

    考查一个初级嵌入式系统开发人员的C基本功,附有答案题目由资深嵌入式系统专家拟定, 目的是考查入门级的嵌入式软件开发人员 Gavin Shaw提供详细解答. 编者按:非常基本关于C语言的问题,一个信息类 ...

  2. （全排列）Ignatius and the Princess II -- HDU -- 1027

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1027 Ignatius and the Princess II Time Limit: 2000/100 ...

  3. Zend_Application 流程详解

    本周没什么工作,zend 系统性的东西渐渐忘记,抽时间整理一下代码!Zend_Application 负责加载配置以及初始化资源,所以index.php 会有这行代码 /** Zend_Applica ...

  4. CentOS6.4 X86_64 kvm+PXE备忘

    Install 安装 1 2 3 4 5 # yum install qemu-kvm qemu-img # 使用kvm至少要安装的包,一个提供用户级别kvm模拟器,一个提供磁盘镜像的管理 # 安装虚 ...

  5. linux下强行umount卸载设备

    卸载NFS,结果出现无法卸载的情况 umount /mnt/umount: /mnt: device is busy使用umount -f,问题依旧umount -f /mnt/umount2: De ...

  6. 对virtual虚方法的理解

    对virtual虚方法的理解 https://www.cnblogs.com/u3ddjw/p/6676485.html

  7. PDF文档转换为图片、图片转成PDF 及PDF合并

    简介 功能:PDF文档按每页转换成一张图片,一张图片转换成一张PDF 并将多张PDF合成一个多页的PDF文档. 经历:在各个网站上搜索始终出现各种问题,尤其是遇到引用的版本问题尤其头疼,不是不能适用当 ...

  8. 简易网页 html

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. stack和stack frame

    首先,我们先来了解下栈帧和栈的基本知识: 栈帧也常被称为“活动记录”(activation record),是编译器用来实现过程/函数调用的一种数据结构. 从逻辑上讲,栈帧就是一个函数执行的环境,包含 ...

  10. Android 色差(尤其白色)的解决办法

    Android 中有时出现色差,我碰到的情况是 Galaxy ACE4 中的白色和系统白色不同,所以显示时候颜色不同,很难看. 我发现的问题是 Color.white, android.R.color ...