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

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

1. 本地生效的原因

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

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

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

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

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

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

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

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

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

相关推荐
向下的大树6 分钟前
npm 最新镜像,命令导致下载错误
前端·npm·node.js
宁雨桥23 分钟前
Service Worker:前端离线化与性能优化的核心技术
前端·性能优化
IT_陈寒34 分钟前
SpringBoot实战:这5个隐藏技巧让我开发效率提升200%,90%的人都不知道!
前端·人工智能·后端
ObjectX前端实验室1 小时前
【图形编辑器架构】节点树与渲染树的双向绑定原理
前端·计算机图形学·图形学
excel1 小时前
Vue2 与 Vue3 生命周期详解与对比
前端
一只猪皮怪52 小时前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Misnice2 小时前
React渲染超大的字符串
前端·javascript·react.js
天天向上的鹿茸2 小时前
用矩阵实现元素绕不定点旋转
前端·线性代数·矩阵
李鸿耀5 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者10 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript