CSS3⾃定义字体、字体图标
⾃定义字体
通常情况下，我们⼀般在设置字体的时候设置的是操作系统上的字体。如果⽤户的操作系统中没有该字体就会影响整个前端的⼀个⽤户体验。
在CSS3 中，新增了⾃定义字体的内容，可以让我们⾃⼰定义⼀个字体，然后放到服务器上，这样尽管⽤户的操作系统中没有该字体，也会从服务器下载到指定的字体，不会影响⽤户体验。
⽂件结构如下
<style>
/* 使⽤ @font-face 来指定⼀个⾃定义的字体 */
@font-face {
font-family: "Custom font";  /* 起⼀个名字 */
src: url("fonts/f");  /* 指定⼀下字体的位置 */
}
p {
font-family: "Custom font";  /* 为 p 元素设置这个⾃定义字体 */
font-size: 20px; /* 设置字体⼤⼩ */
}
</style>
<body>
<p>Hello, this text font is a </p>
</body>
运⾏结果
字体图标
使⽤字体图标可以在⽹页加载的时候被快速渲染出来，减少了图⽚的请求次数，减少⽹络负担。
字体图标的优缺点
优点
1. 轻量性：⼀个图标字体⽐⼀系列的图像（特别是在Retina屏中使⽤双倍图像）要⼩。⼀旦图标字体加载了，图标就会马上渲染出来，不需要下载⼀个图像。可以减少HTTP
请求，还可以配合HTML5离线存储做性能优化。
2. 灵活性：图标字体可以⽤过font-size属性设置其任何⼤⼩，还可以加各种⽂字效果，包括颜⾊、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显⽰。使⽤位
图的话，必须得为每个不同⼤⼩和不同效果的图像输出⼀个不同⽂件。
3. 兼容性：⽹页字体⽀持所有现代浏览器，包括IE低版本。
缺点
1. 图标字体只能被渲染成单⾊或者CSS3的渐变⾊，由于此限制使得它不能⼴泛使⽤。
2. 使⽤版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使⽤。
3. 创作⾃已的字体图标很费时间，重构⼈员后期维护的成本偏⾼
制作字体图标的步骤
1. 要有⼀套 svg ⽮量图，没有的同学可以去要
2. 将⽮量图与字符进⾏绑定
3. 使⽤⼯具或站点⽣成⼀套字体
具体过程
1. 去下载⼀些⽮量图
随便⼀套，点进去下载⼀些就可以啦
⼀定要选择 SVG 下载
2. 下载好了图标就可以去转换成字体了
然后选中图标点击⽣成字体
然后点击下载
3. 解压后的⽬录结构
需要的⽂件就两个style.css以及fonts⽂件夹，其他的可以删除啦~~
使⽤字体图标
直接在标签上指定⼀个class属性，值为style.css中对应的选择器即可style.css中的选择器
直接指定⼀个class属性即可!
<div class="item">
<a class="icon-tb" href="javascript:;"></a>
</div>
⽤字体图标做的⼩ demo
<!-- 引⼊ style.css -->
<link rel="stylesheet" href="style.css">
<!-- 设置⼀些样式 -->
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 400px;
height: 400px;
border: 1px solid;
margin: 100px auto;
}
#wrap>.item {
width: 100px;
height: 40px;
border: 1px solid deeppink;
margin: 10px auto;
}
#wrap>.item>a {
height: 40px;
text-decoration: none;
font-size: 25px;
display: block;
line-height: 40px;
text-align: center;
color: deepskyblue;
transition: 1s;
}
#wrap>.item>a:hover {
color: white;
background-color: deeppink;
}
</style>
<!-- 布局 -->
<div id="wrap">
<div class="item">
<a class="icon-tb" href="javascript:;"></a>
</div>
<div class="item">
<a class="icon-zf" href="javascript:;"></a>
</div>
<div class="item">
<a class="icon-ys" href="javascript:;"></a>
</div>
<div class="item">
<a class="icon-yx" href="javascript:;"></a>
</div>
<div class="item">
<a class="icon-zf" href="javascript:;"></a>
字体包下载大全免费</div>
</div>
运⾏结果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。