web字体和图标

web字体和图标

web字体

解决用户电脑上没有安装相应字体的问题。

当用户电脑上没有安装相应字体时，强制让用户下载该字体。

使用@font-face指令制作一个新字体

@font-face{
    font-family:"good night";
    scr:url("./font/晚安体.ttf")
}

字体图标

iconfont.cn 字体图标库（阿里巴巴）

在线使用：

① 选择需要的图标添加入库
② 生成项目
③ link在线项目链接
④ 在i元素中添加iconfont类 与 图标代码类

<link rel="stylesheet" href="//at.alicdn.com/t/font_1508524_9og07y43wjv.css">
...
<p>
    <i class="iconfont icon-shizhong" ></i>
</p>

离线使用：

下载，解压文件夹，取出iconfont.css .eot .ttf .woff .woff2 .svg文件直接复制，粘贴到CSS文件夹。

link本地css文件，其他操作与在线方式一致。

由于是字体，可以进行font属性操作。