CSS3自定义字体、字体图标

自定义字体

通常情况下，我们一般在设置字体的时候设置的是操作系统上的字体。如果用户的操作系统中没有该字体就会影响整个前端的一个用户体验。

在CSS3 中，新增了自定义字体的内容，可以让我们自己定义一个字体，然后放到服务器上，这样尽管用户的操作系统中没有该字体，也会从服务器下载到指定的字体，不会影响用户体验。

文件结构如下
在这里插入图片描述

<style>
	/* 使用 @font-face 来指定一个自定义的字体 */
    @font-face {
        font-family: "Custom font";  /* 起一个名字 */
        src: url("fonts/Courier New.ttf");  /* 指定一下字体的位置 */
    }

	
    p {
        font-family: "Custom font";  /* 为 p 元素设置这个自定义字体 */
        font-size: 20px;	/* 设置字体大小 */
    }
</style>

<body>
    <p>Hello, this text font is a custom font...</p>
</body>

运行结果
在这里插入图片描述

字体图标

使用字体图标可以在网页加载的时候被快速渲染出来，减少了图片的请求次数，减少网络负担。

字体图标的优缺点

优点

轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。
兼容性：网页字体支持所有现代浏览器，包括IE低版本。

缺点

图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。
使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。
创作自已的字体图标很费时间，重构人员后期维护的成本偏高

制作字体图标的步骤

要有一套 svg 矢量图，没有的同学可以去找马爸爸要
将矢量图与字符进行绑定
使用工具或站点生成一套字体 https://icomoon.io/app/#/select

具体过程

去找马爸爸下载一些矢量图
随便找一套，点进去下载一些就可以啦

一定要选择 SVG 下载
下载好了图标就可以去转换成字体了点我

然后选中图标点击生成字体

然后点击下载
解压后的目录结构

需要的文件就两个 style.css 以及fonts 文件夹，其他的可以删除啦~~

用字体图标做的小 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>

运行结果
在这里插入图片描述

CSS3自定义字体、字体图标

自定义字体

字体图标

字体图标的优缺点

优点

缺点

制作字体图标的步骤

具体过程

用字体图标做的小 demo

猜你喜欢