css字体导入和应用

一,@font-face的使用方法

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，

@font-face的语法规则：

 @font-face { font-family: <YourWebFontName>;
 src: <source> [<format>][,<source> [<format>]]*;
 [font-weight: <weight>];
 [font-style: <style>]; }

取值说明

1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

兼容浏览器

说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念：

一、TureTpe(.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+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

 @font-face { font-family: 'YourWebFontName';
 src: url('YourWebFontName.eot?') format('eot');/*IE*/ 
src:url('YourWebFontName.woff') format('woff'), 
url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }

但为了让各多的浏览器支持，你也可以写成：

 @font-face { font-family: 'YourWebFontName';
 src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ 
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ 
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ 
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ 
}

说了这么多空洞的理论知识，大家一定有点心痒痒了，那么我们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的，假如我们有一个这样的DOM标签，需要应用自定义字体：

HTML Code:

 <h2 class="neuesDemo">Neues Bauen Demo</h2>

通过@font-face来定义自己的Web Font:

 @font-face { font-family: 'NeuesBauenDemo'; 
src: url('../fonts/neues_bauen_demo-webfont.eot');
 src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'), 
url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), 
url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), 
url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
 font-weight: normal; 
font-style: normal;
 }

我在这里采用的是相对路径，当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到我们实际页面中去：

 h2.neuesDemo { font-family: 'NeuesBauenDemo' }

二,字体资源可以在哪里找到

1,icomoon字库

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

2,阿里icon font字库

http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！
fontello
http://fontello.com/
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

3,FontAwesome

http://fortawesome.github.io/FontAwesome/
这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

4,Glyphicon Halflings

http://glyphicons.com/
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

5,Icons8

https://icons8.com/
提供PNG免费下载，像素大能到500PX

三,如何使用资源

 

1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”
2.选择完所有要用的图标后“存储为项目”，给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目。

3.获取在线链接，把里面的代码复制到CSS中

3.在HTML中需要使用到图标时，使用iconfont类名。

<i class="iconfont">&#xe604;</i>     <!--里面写上你想用的图标下面的Unicode-->

4.然后可以通过控制iconfont类的属性改变图标的样式

.iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale; 
        padding-left:20px
}

就可以在页面中引用和修改了。

 

补充：这些图标也可以下载到本地使用。

图标都加入暂存架后选择“下载到本地”，会得到以下几个文件：

浏览器打开三个demo_xxx.html可以使用步骤，选择一种方法使用即可；

 

我们可以在阿里ico font中创建项目,把一个项目所用的字体放到项目中,追加字体时只需要将字体文件重新下载,替换掉之前的四个文件即可.