阿里巴巴字体库使用方法

阿里巴巴矢量字体库地址: http://www.iconfont.cn/

网上看了很多关于字体库的引用,但是还是有很多人在使用时会出现这样那样的问题,所以在这里进行仔细的解释和最后总结.希望对大家有所帮助

使用字体库,可以减轻程序需要加载图片的请求,而且是矢量图,可以通过设置字体样式,改变样式还不会造成变形.

前端PC端或者移动端使用方法有两种,下面是详细介绍:

方法1(在线字体库)

选择需要的字体添加到购物车,
在购物车内,添加到项目中
在项目中选择 fontclass 获取在线样式地址
在本地项目中引入该样式即可使用
标签内直接添加字体类名和选中的类名

//通过地址引用样式
<link rel="stylesheet" href="//at.alicdn.com/t/font_d8odaaz92ju4n29.css">//iconfont 必须添加的,后面的是选中的样式类名
<i class="iconfont icon-shouye"></i>

方法2(生成本地字体库)

选择需要的字体添加到购物车,
在购物车内,下载代码
只需要将 iconfont.css 和 iconfont.ttf 放在项目的目录中
修改 iconfont.css 内容
引用时直接加类名

//修改 css 的内容如下
@font-face {font-family: "iconfont";//这里引用的地址: ttf 相对本文件的地址,也可以是绝对地址//(./)表示在当前目录下src:url('./iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;}.icon-nanzhuang:before { content: "\e600"; }.icon-nvzhuang:before { content: "\e601"; }.icon-gouwuche:before { content: "\e602"; }//iconfont 必须添加的,后面的是选中的样式类名<span class="iconfont icon-account"></span>

阿里巴巴字体库使用方法相关推荐

mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法,vue使用Muse-UI引入阿里巴巴字体图标的方法
Muse-UI引入阿里巴巴字体图标的方法,以及mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法好紧张第一次写博客,第一次总是痛并快乐着.?有写的不对的,不欢迎广大网友指正? ...
java使用第三方字体库的方法，使用第三方ttf/ttc等字体库的方法
java使用第三方字体库的方法,使用第三方ttf/ttc等字体库的方法有时候我们在程序中,会使用到Java字体,但不是所有的字体系统中都会有,我们就可能会使用外部自定义字体,这样在程序迁移部署中就会 ...
字体图标的引入方式(阿里巴巴字体库的使用)
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具http ...
java字体库_java使用第三方字体库的方法，使用第三方ttf/ttc等字体库的方法
java 文件中加一个loadfont的内部类: class Loadfont { public static Font loadFont(String fontFileName, float fon ...
Qt Qml 查看所有字体、添加字体库、使用字体库的方法
最近换了项目里的字体,所以整理一下qt设置字体相关的一点内容, 主要包括: 1.查看当前系统里所有字体的名称 2.添加路径下的字体库 3.使用字体库一.查看当前Qt所有字体的名称为什么要查看字体名 ...
ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...
阿里巴巴字体图标使用方法
第一种方式:font-class引用 [Font class]-[下载至本地]-解压后将资源导入[/src/assets/icon] 在main.js中导入 import '@/assets/icon ...
阿里巴巴图标库引入方法
先登录,点击购物车,添加至项目 fontcss引入点击fontcss 提示有新的icon来袭,点击更新代码生成新的地址,浏览器输入新地址,出来的代码复制,进入一个 css文件里面,引入至全局css ...
微信小程序----引入外部字体库iconfont的图标
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 直接使用阿里巴巴的网络路径选择iconfont图标官网:阿里巴巴矢量字体库步骤:阿里巴巴 ...
阿里图标字体库的动态使用Android
android里的图标之前一直都是使用图片,一个图标需要不同尺寸的几张图片,无形的会增大资源包,而阿里图标字体库是矢量的,使用的是字符,可以使安装包变得更轻量,于是决定使用阿里图标字体库 . 传送门: ...

阿里巴巴字体库使用方法

阿里巴巴字体库使用方法

方法1(在线字体库)

方法2(生成本地字体库)

阿里巴巴字体库使用方法相关推荐

最新文章

热门文章