Iconfont-阿里巴巴矢量库下载的字体

时间：2018-03-01 17:06:37 阅读：523 评论：0 收藏：0 [点我收藏+]

标签：购物 chrome col app -o web 2.3 smooth 本地

https://www.cnblogs.com/xiaomingge/articles/5421503.html

一、下载

下载就是先将所选择的图标加入购物车，然后从购物车里下载代码就行，下载下来就是一个压缩包，解压后如

技术分享图片

二、如何离线调用

如第一步先将字体下载至本地，且一定要把demo里的两个文件.ttf和.woff引入。

1.打开demo_unicode.html就可以看见unicode码和如何引入。

技术分享图片

2.1 引入文件

技术分享图片

2.2 html代码

<div>
    <p class="iconfont">&#xe613;</p>
    <p class="iconfont">&#xe614;</p>
    <p class="iconfont">&#xe651;</p>
</div>

2.3 CSS代码

打开demo下的iconfont.css文件,如下：

@font-face {font-family: "iconfont";
  src: url(‘iconfont.eot?t=1519883495629‘); /* IE9*/
  src: url(‘iconfont.eot?t=1519883495629#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
  url(‘data:application/x-font-woff） format(‘woff‘),
  url(‘iconfont.ttf?t=1519883495629‘) format(‘truetype‘),/*chrome,firefox,opera,safari,Andriod,ios 4.2+*/
  url(‘iconfont.svg?t=1519883495629#iconfont‘) format(‘svg‘);/*ios 4.1-*/

}


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

.icon-shouye:before { content: "\e613"; }

.icon-shouye1:before { content: "\e614"; }

.icon-icon:before { content: "\e651"; }

复制到自己的CSS代码：

@font-face {font-family: "iconfont";
  src: url(‘font/iconfont.eot?t=1519883495629‘); /* IE9*/
  src: url(‘font/iconfont.eot?t=1519883495629#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
  url(‘data:application/x-font-woff） format(‘woff‘),
  url(‘font/iconfont.ttf?t=1519883495629‘) format(‘truetype‘),/*chrome,firefox,opera,safari,Andriod,ios 4.2+*/
  url(‘font/iconfont.svg?t=1519883495629#iconfont‘) format(‘svg‘);/*ios 4.1-*/

}

.iconfont {
  font-family:"iconfont" !important;
  font-size:36px;
  color:blue;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

改变一下url路径,字体大小，颜色即可。

技术分享图片

Iconfont-阿里巴巴矢量库下载的字体

标签：购物 chrome col app -o web 2.3 smooth 本地

原文地址：https://www.cnblogs.com/potato-lee/p/8488355.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行