CSS如何引用字体

qinnzheng（郑琴）

于 2020-08-14 19:21:00 发布

阅读量1.8k

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_36206799/article/details/108011844

版权

本文介绍如何使用Transfonter网站将字体转换为WOFF和WOFF2格式，并通过Base64编码直接在CSS中引用，适用于网页设计者和前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转换字体网址：https://transfonter.org/

1. 将字体转换成WOFF、WOFF2的形式引用
在这里插入图片描述

<p>啦啦啦啦啦啦</p>

@font-face {
    font-family: 'HYQiHei';
    src: url('../fonts/HYQiHei.woff2') format('woff2'),    //字体在项目中的路径
        url('../fonts/HYQiHei.woff') format('woff');      //字体在项目中的路径
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
p{
	font-family: 'HYQiHei';
}

2. 将字体转换成Base64的形式引用

在这里插入图片描述
直接将stylesheet.css里面的代码复制过去就可以使用。