web字体
- 为自己的网页指定特殊的字体,无须考虑用户电脑上是否安装了此字体。
- 可以在 阿里妈妈webfont 平台上输入想要使用指定字体的文字内容,然后下载下来
- 用法和web字体图标一样
- 声明自定义字体:@font-face(直接复制)
- 定义应用字体的样式
- 为元素应用样式
- 注意使用web字体时,只有输入的内容中的文字才会应用下载下来的字体,因为下载下来的文件里面是输入的内容的文字的编码
字体图标
- 本质是字体,可以任意改变大小、颜色、透明度等等
- 把所有的图标都打包成字体库,减少请求
- 具有矢量性,(放大时)可保证清晰度
- 几乎支持所有的浏览器
- 移动端设备必备良药
字体图标的使用
- 下载字体图标
- 推荐网站
- 将下载下来的fonts文件夹放到网页所在目录中
- 在 样式 中声明字体:即声明自定义的字体(直接复制下面的代码到样式表中)
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?mcsslk');
src: url('fonts/icomoon.eot?mcsslk#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?mcsslk') format('truetype'),
url('fonts/icomoon.woff?mcsslk') format('woff'),
url('fonts/icomoon.svg?mcsslk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family : "icomoon";
}
- 在盒子里面添加结构
- 将下载下来的字体符号的文件夹中的demo.html打开,复制对应字体图标的符号粘贴到对应盒子中(这种方式有一个缺点,就是不够直观,光从代码上不知道使用的是哪个字体图标,所以多数使用下面的方式
- 还有另外一种使用字体图标的方式:
上传字体包:将svg格式的图片转为字体图标
- 推荐网站:iconmoon字库
- 在网站中点击import icons上传图片,即可将图片转为字体图标,下载即可