CSS：引用自定义字体（Vue引用自定义字体）

某只杂鱼

已于 2023-07-31 17:00:52 修改

阅读量1.4k

点赞数 1

分类专栏：前端 vue 文章标签： html css vue

于 2022-04-15 17:09:15 首次发布

本文链接：https://blog.csdn.net/qq_36604536/article/details/124199005

版权

前端同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

文章目录

需求描述

在界面展示非系统自带的字体，如：
自定义字体

引用方式

将字体文件（*.ttf）放到项目文件夹下，如：
在CSS中引入字体文件：

@font-face {
  font-family: "自定义字体名称";
  src: url('./自定义字体文件名称.ttf') format('truetype');
}

使用字体样式：

.diy_font { /* 使用自定义字体的类 */
  font-family: 自定义字体名称;
}

Vue中引用自定义字体

Vue中引用自定义字体的流程与上述无异，可详见Vue引入自定义字体；需要注意的是：
①Vue中只能在.css文件定义@font-face，在.scss文件定义会一直报找不到字体文件错误（本杂鱼实测如此，若大佬们环境中无异常请忽略）；
②Vue要在main.js文件中引入定义了@font-face的.css文件