教你学会html添加自定义字体，使用@font-face和免费字体网站

最新推荐文章于 2024-01-04 11:37:56 发布

原创最新推荐文章于 2024-01-04 11:37:56 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #ttf

2020-12 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过@font-face和免费字体网站如字体视界、字客网来添加自定义字体到HTML项目中。首先，从字体下载网站获取字体文件，接着使用@font-face生成器创建CSS文件，然后将生成的字体文件放入项目并引用到main.js中，最后在CSS中应用新字体以实现预览效果。

字体引入

字体视界是一个免费字体下载网站，商用需授权：https://www.17font.com/
字客网：@font-face生成器：https://www.fontke.com/tool/fontface/ 可以直接生成css文件

下载字体后，将字体.ttf文件上传到@font-face生成器，如下图

生成好的zip解压，将里面的文件复制到vue项目中自己建立的字体文件夹中

在这里插入图片描述

在main.js中引用字体的css文件

//引用的自己下载的字体
import "./assets/fonts/仓耳非白W04/仓耳非白W04.css";

css文件中内容如下

@charset "UTF-8";

@font-face {
  font-family: "仓耳非白W04";
  src: url("仓耳非白W04.woff2") format("woff2"),
       url("仓耳非白W04.woff") format("woff"),
       url("仓耳非白W04.ttf") format("truetype"),
       url("仓耳非白W04.eot") format("embedded-opentype"),
       url("仓耳非白W04.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}