CSS——web字体与CSS字体图标

 

文章目录

• web字体
• • 字体格式
• 字体图标
• • 字体图标优势
  • 字体图标使用流程
  • • 设计字体图标
    • 上传生成字体包
    • 下载兼容字体包
    • 字体引入到HTML
    • • • 第一步：在样式里面声明字体： 告诉别人咱们本身定义的字体
        • 第二步：给盒子使用字体
        • 第三步：盒子里面添加结构
  • 追加新图标到原来库里面

 

web字体

字体格式

不一样浏览器所支持的字体格式是不同的，咱们有必要了解一下有关字体格式的知识。

一、TureType(.ttf)格式

.ttf字体是Windows和Mac的最多见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

二、OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

三、Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

四、Embedded Open Type(.eot)格式

.eot字体是IE专用字体，能够从TrueType建立此格式字体，支持这种字体的浏览器有IE4+；

五、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知识后，咱们就须要为不一样的浏览器准备不一样格式的字体，一般咱们会经过字体生成工具帮咱们生成各类格式的字体，所以无需过于在乎字体格式间的区别差别。

字体图标

图片是有诸多优势的，可是缺点很明显，好比图片不但增长了总文件的大小，还增长了不少额外的"http请求"，这都会大大下降网页的性能的。更重要的是图片不能很好的进行“缩放”，由于图片放大和缩小会失真。 咱们后面会学习移动端响应式，不少状况下但愿咱们的图标是能够缩放的。此时，一个很是重要的技术出现了，额不是出现了，是之前就有，是被重新"宠幸"啦。。 这就是字体图标（iconfont).

字体图标优势

能够作出跟图片同样能够作的事情,改变透明度、旋转度，等…
可是本质实际上是文字，能够很随意的改变颜色、产生阴影、透明效果等等…
自己体积更小，但携带的信息并无削减。
几乎支持全部的浏览器
移动端设备必备良药

字体图标使用流程

整体来讲，字体图标按照以下流程：

设计字体图标

假如图标是咱们公司单独设计，那就须要第一步了，这个属于UI设计人员的工做， 他们在 illustrator 或 Sketch 这类矢量图形软件里建立 icon图标， 好比下图：

以后保存为svg格式，而后给咱们前端人员就行了。

其实第一步，咱们不须要关心，只须要给咱们这些图标就能够了，若是图标是大众的，网上原本就有的，能够直接跳过第一步，进入第三步。

上传生成字体包

当UI设计人员给咱们svg文件的时候，咱们须要转换成咱们页面能使用的字体文件， 并且须要生成的是兼容性的适合各个浏览器的。

icomoon字库
推荐网站： http://icomoon.io
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它容许用户选择他们所须要的图标，使它们成一字型。 内容种类繁多，很是全面，惟一的遗憾是国外服务器，打开网速较慢。

阿里icon font字库
推荐网站： http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可使用AI制做图标上传生成。 一个字，免费，免费！！

fontello
http://fontello.com/

在线定制你本身的icon font字体图标字库，也能够直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings

http://glyphicons.com/

这个字体图标能够在Bootstrap下无偿使用。自带了200多个图标。

Icons8

https://icons8.com/

提供PNG免费下载，像素大能到500PX

下载兼容字体包

刚才上传完毕， 网站会给咱们把UI作的svg图片转换为咱们的字体格式， 而后下载下来就行了

固然，咱们不须要本身专门的图标，是想网上找几个图标使用，以上2步能够直接省略了， 直接到刚才的网站上找喜欢的下载使用吧。

字体引入到HTML

获得压缩包以后，最后一步，是最重要的一步了， 就是字体文件已经有了，咱们须要引入到咱们页面中。

1. 首先把 如下4个文件放入到 fonts文件夹里面。 通俗的作法

   第一步：在样式里面声明字体： 告诉别人咱们本身定义的字体

   @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-weight: normal;
     font-style: normal;
   }

   第二步：给盒子使用字体

   span {
   		font-family: "icomoon";
   	}

   第三步：盒子里面添加结构

   span::before {
   		 content: "\e900";
   	}
   或者  
   <span></span>

追加新图标到原来库里面

若是工做中，原来的字体图标不够用了，咱们须要添加新的字体图标，可是原来的不能删除，继续使用，此时咱们须要这样作

把压缩包里面的selection.json 重新上传，而后，选中本身想要新的图标，重新下载压缩包，替换原来文件便可。