css 自定义字体的使用方法

<!--自定义字体

给下载的或者我们自定义的字体声明一个名字,方便我们以后的引用,引用时需要告诉系统文字的路径.

font-face

文字的字体包(字体文件)格式:

1.ttf;最常用.chrome,Safari,Opera,firfox,ios,Android都支持该类型的字体包.

2.eot:仅支持IE浏览器可使用.

3.svg:应用ios

4.woff:chrome和firfox

引用字体的语法

@font-face{

font-family:我们自己起的名字

src:自定义文字包的路径.

}

-->

以上几种格式的使用方法

步骤1:

网上搜索矢量图标库，比如教程中用到的是“阿里巴巴矢量图标库”。进入网站选择风格一致的图标，点选进行下载~

步骤2:

使用font-face声明字体。font-family是自定的字体名称，url是字体文件的存放路径，format是字体文件格式。

@font-face {

  font-family: 'iconfont'; /*自定的字体名称*/

  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#iconfont') format('svg'); /* iOS 4.1- */

}

步骤3:

定义一个css样式，使用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;

}

步骤4:

挑选相应图标并获取字体编码，将样式应用于页面即可。

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

挑选相应图标并获取字体编码，将样式应用于页面即可。

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