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

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

1. 本地生效的原因

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

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

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

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

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

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

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

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

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

相关推荐
灰灰勇闯IT几秒前
RN原生模块交互:打通JS与原生的桥梁
开发语言·javascript·交互
LYFlied2 分钟前
浅谈跨端开发:大前端时代的融合之道
前端·flutter·react native·webview·大前端·跨端开发·hybrid
LYFlied2 分钟前
浅谈前端构建工具核心理解&&主流工具对比
前端·webpack·软件构建·rollup·vite·开发工具·工程化
weixin_3077791316 分钟前
Jenkins jQuery3 API 插件详解:赋能插件前端开发的利器
运维·开发语言·前端·jenkins·jquery
LinDon_25 分钟前
【企业微信快速登录适配 Chrome/Edge 142+】
前端·chrome·企业微信
paopaokaka_luck30 分钟前
基于SpringBoot+Vue的高校心理健康服务平台(websocket实时聊天、AI分析、Echarts图形化分析)
vue.js·spring boot·websocket·mysql·echarts
JosieBook32 分钟前
【Vue】google chrome中安装vue_dev_tools.crx的时候提示“无法安装扩展程序,因为它使用了不受支持的清单版本。”
前端·vue.js·chrome
前端不太难34 分钟前
RN 性能优化:列表滚动掉帧、卡顿怎么办?
前端·react native·性能优化
亿元程序员35 分钟前
祖传项目二开快上线了,却还有很多旧的资源,怎么办?
前端
GIS学姐嘉欣37 分钟前
0帧起手《Vue零基础教程》,从前端框架到GIS开发
前端·vue.js·前端框架·gis