前端vue引入特殊字体不生效

引入特殊字体ttf,TTF等发现开发环境中生效,项目部署后不生效何解?

1. 本地生效的原因

本地使用的是本地的资源,控制台可以看到对ttf文件的请求与加载。

2.部署后不生效的原因与解决

控制台可以看到对ttf资源文件的请求加载失败,code可能是200不代表返回成功了哦,注意仔细看响应

(1)检查引用的文件名是否大小写正确。比如文件后缀 ttf 和TTF

(2)检查项目是用什么构建的

①vite:默认情况下,使用环境的打包命令会看到所有的资源(img,css,js,fonts)都统一放在assets下(如果没有特殊配置的话);

②webpack:也需要查看对应的打包后的文件结构

(3)看nginx配置文件是否需要添加 字体路径到服务器上上的映射

(4)H5页面被嵌入的环境是否禁用了特殊字体

相关推荐
山有木兮木有枝_21 小时前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy21 小时前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全21 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101221 小时前
[前端]1.html基础
前端·笔记·学习·html
白水清风21 小时前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy21 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全21 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
小天呐1 天前
qiankun 微前端接入实战
前端·js·微前端
周航宇JoeZhou1 天前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台
车口1 天前
滚动加载更多内容的通用解决方案
javascript