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

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

1. 本地生效的原因

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

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

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

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

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

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

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

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

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

相关推荐
曲幽4 分钟前
JavaScript流程控制:从混乱条件到优雅遍历,一次讲清如何让代码听话
javascript·web·js·for·while·if·if else
2501_9445264212 分钟前
Flutter for OpenHarmony 万能游戏库App实战 - 笑话生成器实现
android·javascript·python·flutter·游戏
请叫我聪明鸭16 分钟前
基于 marked.js 的扩展机制,创建一个自定义的块级容器扩展,让内容渲染为<div>标签而非默认的<p>标签
开发语言·前端·javascript·vue.js·ecmascript·marked·marked.js插件
悟能不能悟17 分钟前
Gson bean getxxx,怎么才能返回给前端
java·前端
2501_9447114319 分钟前
前端向架构突围系列 - 工程化(五):企业级脚手架的设计与落地
前端·架构
Apex Predator24 分钟前
本地库导入到nexus
java·服务器·前端
趁着年轻吃点苦34 分钟前
宝塔面板部署指南
前端
2501_9445264234 分钟前
Flutter for OpenHarmony 万能游戏库App实战 - 21点游戏实现
android·javascript·flutter·游戏·harmonyos
0思必得036 分钟前
[Web自动化] Selenium中Select元素操作方法
前端·python·selenium·自动化·html
Duang007_40 分钟前
【万字学习总结】API设计与接口开发实战指南
开发语言·javascript·人工智能·python·学习