再说iconfont和font-face

作者：Jasmine - 2015年03月19日

初始font-face

每次介绍一次新属性之前，都要把其属性值先简单介绍一下，这样可以让同行加深一下印象，对于@font-face这个属性，mozilla 的语法如下

@font-face {    
	[font-family: <family-name>;]?    
	[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?    
	[unicode-range: <urange>#;]?    
	[font-variant: <font-variant>;]?    
	[font-feature-settings: normal|<feature-tag-value>#;]?    
	[font-stretch: <font-stretch>;]?    
	[font-weight: <weight>];    
	[font-style: <style>];
}

@font-face可以让csser们自定义网页显示字体，即使是用户本地电脑没有安装相关的字体，但是依然可以正常是显示。比如定义一个 HelveticaNeue 字体，假如你在电脑上看的的是

那说明你的电脑上没有这个Helvetica字体，假如你显示那么说明你的电脑上是有这个字体。而通过@font-face引入自定义字体，那么不管你电脑有没有Helvetica字体都会显示后面这张图片的字体。

1.font-family，指定一个字体类型作为默认字体类型，比如font-family:宋体默认字体就会是宋体.

2.src，这里有3个值，分别是url引入字体路径资源，本地路径或者网络路径都可以；font-face-name：自定义字体名称；formart：字体格式，因为浏览器的N国争锋，所以导致市面上有很多的字体格式，目前主要有ttf、woft、eot、svg、svgz这几种格式类型，对应的浏览器支持如下

浏览器	支持类型
IE6,7,8	仅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5	支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6	支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome,Safari,Opera	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

3.unicode-range，字体编码的范围，比如8位，16位等。

4.font-variant，字体变形值

5.font-stretch，字体拉伸值

6.font-weight，字体粗线值

7.font-style，字体属性值

初识iconfont

就算我们一开始不懂这个英文不懂是干嘛的，对于iconfont，英文从后往前读应该叫做：字体图标。这里面已经包含两个概念，首先必须是字体，第二，就是图标。我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性，所以这个iconfont必须是以文字嵌入到样式中，所以想到的必须是font；既然是图标那么它就必须有一个路径来引入进来，首先我们一开始想到的img这个标签，既然又是文字又是图标，我们能想到的就只有这个@font-facecss3属性。

所以，当我们看见阿里巴巴的iconfont的图标教程如下：

第一步：使用font-face声明字体

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}

第二步：定义使用iconfont的样式

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

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33</i

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/165

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！