字体图标

一、自定义字体
二、阿里巴巴矢量图库使用
三、字体图标

前端在处理字体的时候，一般都会引用大多数电脑已经安装好的字体，如微软雅黑、宋体等等，从而来保证浏览器中字体渲染效果一致，而我们如果引用了一些自己本地自行安装的字体时，而用户的计算机上却没有，就会使得用户计算机上显示的是浏览器的默认字体，因此我们需要用到字体图标等。

一、自定义字体

语法：

@font-face{font-family:<family-name>;/*必须属性，指定字体的名字*/src:<src>;/*必须属性，字体文件的位置，尽量写多个来源（用逗号隔开）*/font-weight:<font-weight>font-style:<font-style>
}

在平时开发的时候，推荐大家上阿里巴巴矢量图标库上去找字体，这里为大家介绍一下阿里巴巴矢量图标库的使用过程。

二、阿里巴巴矢量图库使用

例如我们这里要使用阿里巴巴矢量库的字体样式，首先进入首页点击上方导航栏的：

点击在线字体或者阿里巴巴普惠体，进入到页面后可以根据选择添加字体，然后生成字体：

这里我们可以通过两种方式来引用字体，首先第一种是引用线上地址，这个我们可以直接将代码直接复制下来：

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">@font-face {font-family: 'webfont';font-display: swap;src: url('//at.alicdn.com/t/webfont_k3a62swzr9m.eot'); /* IE9*/src: url('//at.alicdn.com/t/webfont_k3a62swzr9m.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('//at.alicdn.com/t/webfont_k3a62swzr9m.woff2') format('woff2'),url('//at.alicdn.com/t/webfont_k3a62swzr9m.woff') format('woff'), /* chrome、firefox */url('//at.alicdn.com/t/webfont_k3a62swzr9m.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('//at.alicdn.com/t/webfont_k3a62swzr9m.svg#AlibabaPuHuiTiM') format('svg'); /* iOS 4.1- */}.test{font-family: webfont;}</style>
</head>
<body><p class="test">Lorem ipsum dolor sit amet, consectetur adipisi执子之手</p>
</body>
</html>

这里需要注意的是，如果引用了样式的话，只有你输入的字体样式会改变，例如这里，只有“执子之手”的字体样式发生了改变：

所以如果想要将字体样式都发生改变，就需要将字体全都复制都图标库中生成字体。
第二种方法是进行本地下载，下载后的文件是这样的：

使用时点开demo.html，将代码复制到自己的代码当中：

并将文件夹中除了demo.html外的文件复制到自己指定的文件夹中，我这里是放在了fontcont文件夹底下，注意这边文件路径改变的话，代码中的路径要相应改变：

结果如图：

三、字体图标

字体图标是以字体文件的形式封装，并通过CSS的@font-face声明调用，达到简单图片的效果。例如阿里巴巴矢量图库首页上的导航栏：

字体图标的下载和生成也是通过阿里巴巴矢量图库获取的，例如在首页中随便找一个图标并加入购物车：

在购物车中添加到自己的项目中：

就可以在项目中看到自己添加的素材：

要获得代码的话也有两个方法，一个是获取在线链接：

还有一个是下载到本地，使用方法和字体样式一样，先将demo复制进去，再将除了demo外的文件复制到文件夹中：

这里与字体样式不一样的是，引用图标的话需要编码，例如这里的编码：

在代码中也要改变相应的编码，当然也可以通过类名或id的方法来调用，原理同unicode类似：

这一部分到这里就结束啦，有不足的地方还望大家指正啦，蟹蟹！

字体图标的设置（阿里巴巴矢量图库的使用）相关推荐

微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）
微信小程序学习11:iconfont 网络字体图标使用(阿里巴巴) 使用方法 [1] 是直接下载图片,使用<image src="/static/images/v2.jpg" ...
伪元素使用——字体图标（以阿里巴巴矢量图标库为例）
1.在阿里巴巴矢量图标库中,找到你喜欢的字体图标,选择添加入库(即购物车图标) 2.点击在页面右上方的"购物车" 3.选择"添加到项目",(没有项目可以创建一个 ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
整理在小程序页面样式中引入阿里巴巴字体图标
整理在小程序页面样式中引入阿里巴巴字体库 1.登录阿里巴巴字体图标 2.在小程序项目中配置 1.登录阿里巴巴字体图标点我阿里巴巴字体图标库搜索需要的字体图标将需要的字体图标点击添加到购车中添加 ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
CSS——字体图标、平面转换、缩放
一.字体图标字体图标主要用于网页中通用.常用的一些小图标: 精灵图的缺点:1.图片文件大: 2.图片放大和缩小会有失真的问题: 3.一旦图片制作完成想要更换非常复杂. 字体图标iconfont,展示 ...
WPF字体图标——IconFont
一.字体图标概述 ①字体图标其实就是把矢量图形打包到字体文件里,以后就可以像使用一般外置字体一样的使用它,因此Winform.WPF中都是可以用的. ②可以在很多地方使用图标字体,包括自定义控件.自定 ...
Vue.js-Day07【项目实战(附带完整项目源码)-day02：学习能力、字体图标（使用步骤）、在vue.js中使用jQuery】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
Linux和qt电子横幅,【Qt】自定义组件_滚动横幅弹窗对话框字体图标等
问题反馈邮箱:1508539502@qq.com 鸣谢其他组件 BannerLabel 滚动横幅部件特性可随机添加图片路径及提示信息集合可清空图片路径及提示信息集合可设置图片切换时间可设置提 ...
根据.svg文件借助IconMoon生成字体图标及应用的方法
应用背景:字体图标可以设置font-size, color, 因此,任意缩放不会失真,且当有页面颜色换肤需求时,针对不同皮肤颜色,不需要多次切图,只需在css里面设置color即可.同时,也减少了图片 ...

字体图标的设置（阿里巴巴矢量图库的使用）

字体图标

一、自定义字体

二、阿里巴巴矢量图库使用

三、字体图标

字体图标的设置（阿里巴巴矢量图库的使用）相关推荐

最新文章

热门文章