前端之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. gradle使用总结

    ###打包时跳过单元测试

  2. win10自带虚拟机安装CentOS7系统（转）

    出处:http://blog.csdn.net/bimabushihaodongxi/article/details/53677490 话说工欲善其事,必先利其器,在我准备学习Linux之前先要完成l ...

  3. 使用js/jquery查找iframe中的

    原生js  一.在iframe的父窗口中获取iframe中的元素: js代码 格式: window.frames["iframe的name值"].document.getEleme ...

  4. OA与ERP集成 可行？

    [正文] 近些年来,当谈论到企业信息化的时候,ERP都成为一个热门话题,ERP的出现似乎给企业带来了一个翻天覆地的变化,而且也成为企业实现信息化的"新宠儿".然而OA也曾经是企业信 ...

  5. Objective-C 学习笔记(二) 函数

    Objective-C 函数 定义一个方法 在Objective-C编程的方法定义的一般形式如下: - (return_type) method_name:( argumentType1 )argum ...

  6. 深夜配置一把struts2

    在intellij idea里面配置出来了struts2的一个Helloworld,因为换了工具,在网上查了很多关于IDEA配置它的方式,好多是用Maven解决依赖关系的.于是按照网上的来,发现很多东 ...

  7. CSS3 线性渐变linear-gradient

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...

  8. Npoi--合并单元格

    一.缘由. 最近公司的一个需求,导出 Excel, 相同的数据进行合并,并且 还有 二级合并. 最终效果图如下: 哈哈哈哈哈,图表略微有些丑陋,请大家不要介意. 他的原始数据,是一条一条的, 如下图: ...

  9. WPF 卡顿调试经验

    1. 问题 最近的一个项目,正常调试情况下,运行一切正常,但是有某个用户登录后,出现界面卡顿2-3mins后,才正常运行. 2.解决问题方法 (1)首先由于是必现问题,就想在vs的工作环境下调试一下, ...

  10. let、const和var的区别

    1.let是块级作用域,函数内部使用let定义后,对函数外部无影响. <!DOCTYPE html> <html lang="en"> <head&g ...