vue本地引入otf字体文件和引入字体文件的downloadable font: CFF问题

本文链接：https://blog.csdn.net/weixin_43858522/article/details/134338609

一、vue引入otf字体文件和使用

1.在vue项目中assets文件夹中创建fonts文件夹，如下图，将otf字体文件放进去。

在这里插入图片描述

2.在fonts文件夹下创建一个font.css文件，并添加以下代码。

@font-face {
  font-family: "Bold";
  src: url("SourceHanSansCN-Bold.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ExtraLight";
  src: url("SourceHanSansCN-ExtraLight.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Heavy";
  src: url("SourceHanSansCN-Heavy.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Light";
  src: url("SourceHanSansCN-Light.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Medium";
  src: url("SourceHanSansCN-Medium.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Normal";
  src: url("SourceHanSansCN-Normal.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Regular";
  src: url("SourceHanSansCN-Regular.otf");
  font-weight: normal;
  font-style: normal;
}

3.在main.js中全局引入

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

import "./assets/fonts/font.css";


app.mount('#app')

4.在vue文件中如何使用，想使用什么字体，就引入什么font-family

在这里插入图片描述


<style scoped>
*{
  font-family: 'Normal';
}

//*{
// font-family: 'ExtraLight';
//}

</style>

二、引入otf的问题

downloadable font: CFF: Undefined operator: 0 (0x0) (font-family: “Regular” style:normal weight:400 stretch:100 src index:0) source: http://localhost:5173/src/assets/fonts/SourceHanSansCN-Regular.otf

downloadable font: CFF : Failed validating CharStrings INDEX (font-family: “Regular” style:normal weight:400 stretch:100 src index:0) source: http://localhost:5173/src/assets/fonts/SourceHanSansCN-Regular.otf

downloadable font: CFF : Failed to parse table (font-family: “Regular” style:normal weight:400 stretch:100 src index:0) source: http://localhost:5173/src/assets/fonts/SourceHanSansCN-Regular.otf

downloadable font: rejected by sanitizer (font-family: “Regular” style:normal weight:400 stretch:100 src index:0) source: http://localhost:5173/src/assets/fonts/SourceHanSansCN-Regular.otf

在这里插入图片描述

解决方法一

不引用本地的css，直接引用官网建议的地址

<script src="https://use.fontawesome.com/140a7cyued.js"></script>

解决方法二

可能就是你报错的那个字体文件用不了了，需要你找UI在给你一份字体文件，如果是你自己下载的你需要重新下载一遍报错的那个字体文件。SourceHanSansCN-Regular.otf

三、判断字体文件是否损坏的方法，判断是否能直接打开。

没有损坏的字体文件打开时这样的：

在这里插入图片描述

已经损坏的字体文件打开时这样的：

在这里插入图片描述

参考：
火狐自定义字体失败 downloadable font: no supported format found

解决@font-face引入字体文件异常

四、镇楼图

在这里插入图片描述