iconfont及自定义字体

一、iconfont

iconfont:

将iconfont拆开来看，就是icon（图标）和font（字体）。简单的说iconfont就是利用字体工具把我们平时网页上用的图形图标转换成网页字体。其实跟字体差不多，字体对应的是文本，iconfont对应的是图标

iconfont的优势：

1、相比图片的大小容量，iconfont几乎是羽翼级轻量。
2、图标都被打包在字体库里面，减少了HTTP的请求数量，加速网页加载速度。
3、使用iconfont非常方便，和设置网页字体一样，可以利用CSS来定义图标大小、图标颜色、图标透明度等

iconfont的劣势：

1、利用CSS无法方便的定义多彩的icon，大部分是单一颜色。
2、因为iconfont跟字体有关，所以它很容易受到字符编码的影响。

iconfont的使用：

Iconfont-阿里巴巴矢量图标库
网页图片
1.新建项目，将自己需要的图标加入购物车

2.点击下载代码

3.下载好的文件打开后：
4.打开demo.html

使用步骤：
(1)在css中复制生成的@font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

(2)定义使用 iconfont 的样式(还可以设置颜色color)

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

(3)挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">&#x33;</span>

二、自定义字体

1.首先下载好字体文件.ttf 字魂网
2.@font-face引入字体文件，并且定义该字体的名称为：Font（自己随便写）

<style> 
　　@font-face{
　　　　font-family: Font;
　　　　src: url('字体文件路径.ttf')
　　}
</style>

3.使用

<body>
    <div class="font">哈哈哈哈</div>
</body>

<style> 
    @font-face{
    　　font-family: Font;
    　　src: url('字体文件路径.ttf') 
　　} 
　　body{ font-family：Font; } 
</style>

自定义字体图片：

consistent__

发布了11 篇原创文章 · 获赞 0 · 访问量 250

私信关注