vue引入外部字体报错问题

最新推荐文章于 2024-06-19 10:44:36 发布
原创 最新推荐文章于 2024-06-19 10:44:36 发布 · 1.6k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

部署运行你感兴趣的模型镜像

报错的原因是路径导致的

目录结构
在这里插入图片描述

先上正确的写法

@font-face {
    font-family: 'ali';
    src: url('/src/assets/font/Alibaba-PuHuiTi-Regular.ttf');
}

错误的写法

@font-face {
    font-family: 'ali';
    src: url('../assets/font/Alibaba-PuHuiTi-Regular.ttf');
}

字体不生效把你要用的字体传到下面的网址生成对应的兼容写法

https://www.fontke.com/tool/convfont/

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

解决vue3引入字体图标iconfont.js时eslint报错的问题
绝对零度的博客
08-30 3085
解决vue3引入字体图标iconfont.js时eslint报错的问题
解决vue 项目引入字体图标报错、不显示等问题
12-02
问题：在项目开发时使用字体图标，发现两个问题； 1、出现报错： 解决方法为：把字体引入方式改为绝对路径 2、不报错，但是不显示图标字体，出现方框 原因可能有两种： ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入） ②这个就是我遇到的问题，浪费了我好几分钟！！！微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写。 以上这篇解决vue 项目引入字体图标报错、不显示等问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希
Vue2.x中利用@font-size引入字体图标报错的解决方法
12-04
利用 vue-cli 搭建的项目平台 利用stylus写的css样式 有 css-loader 依赖包x 下图是 webpack.base.conf.js 关于字体文件的配置 有人这里会有重复的字体文件的配置，删除一项即可 出现的问题：引入字体图标出现问题 1.报错 将字体引入的相对路径改成绝对路径 相对路径 绝对路径 2.不报错，但是出现的字体图标是小方框 有警告信息： 小方块： 报错是因为重定向的问题 出现上述问题的原因 ①没在用到的地方引入字体的样式文件 ②使用的是后缀名为 .styl 文件 ③将font文件夹移动到static文件夹中，利用绝对路径访问，此时可以使用.sty
spring boot + thymeleaf项目中的css使用font-face加载其他字体时失败
weixin_41421576的博客
07-01 830
resource-static路径下的css static下建立fonts文件夹 加入font.woff文件 src: url(…/fonts/font.woff) format(“woff”); 注意woff文件好像不能乱命名 之前叫icon.woff就无法成功加载…
vue用import方式引入ttf字体文件报错及解决方法
格の调
08-29 3788
关于在vue项目中引入ttf格式的字体文件，基本工作： 下载下来字体文件，新建一个font文件夹，把字体文件放进去，在新建一个font.css文件（可以不用新建，直接在主css文件里写），把字体文件@font-face引入进css里。 注：@font-face也可以直接在scss文件里写或引入，不一定要在css文件里。 前面工作做完后，运行报错O(∩_∩)O 网上查了好半天，普遍都说是配置文件webpack.config.js中没有配置解析字体的模块。 用到的方法就是在build -> webpa
vue引入外部字体包报错(You may need an appropriate loader to handle this file type.)
weixin_44781409的博客
08-12 1万+
vue项目引入外部字体包，然后报这个错 解决方案
vue css引入外部字体报错
01-17
### Vue 项目中引入外部 CSS 字体报错解决方案 当在 Vue 项目中引入外部 CSS 字体时，可能会遇到诸如 `Failed to decode downloaded font` 的错误。这类问题通常由以下几个原因引起： #### 跨域资源共享 (CORS) ...
vue2外部字体ttf导入
最新发布
07-04
### 在 Vue2 项目中导入外部 TTF 字体文件的方法 在 Vue2 项目中，可以通过以下步骤将外部 TTF 字体...- 若遇到字体加载失败或报错问题，检查浏览器控制台是否有错误提示，并确认路径和文件扩展名是否一致[^3]。 ---
vue引用外部字体文件不生效怎么办
06-12
嗯，用户这次明确提出了Vue项目中外置字体不生效的问题，结合之前的对话历史，用户应该是在若依框架（基于Vue）中引入思源黑体时遇到了障碍。从用户引用的资料来看，ta已经尝试过常规方案但未成功，现在需要更深入的...
解决iview打包时UglifyJs报错的问题
10-18
本文将详细介绍如何解决在使用iview库进行Webpack打包时遇到的UglifyJs报错问题。 ### 知识点概述 1. **iview库与ES6语法**：iview是一个基于Vue.js的高质量UI组件库。在最新版本中，iview大量使用了ES6+的特性，...
vue中引入字体无效（记录）
H2659541076的博客
05-24 6840
vue中引入字体无效（记录）
vue引入外部字体包报错(Source code omitted for this binary file)
Charis--Cai
06-12 5437
vue项目引入外部字体包，然后报这个错，在网上搜，都是说使用webpack打包的时候才会出现这个错（原因是缺少loader） 解决方案：将字体包转换一下，转换地址为https://transfonter.org/ 然后下载下来 引入就OK了。 纯属做笔记 ...
vue中引入字体资源遇到的问题
weixin_44528408的博客
04-29 760
"@"是jsconfig.json/tsconfig.json配置的资源路径。"~"是webpack中css-loader提供的导入资源语法。这种写法能加载字体，但是无法应用字体。这种写法会报错，甚至无法通过编译。这种写法可以加载并应用字体。
vue js 引入font.css报错
素味平生的博客
12-01 862
报错截图 解决方法 1. 将字体文件放在 static 下面 2. 在 font.css 文件中用绝对路径引入字体 3. 在 App.vue 中引入css（@import "assets/css/font.css"） 效果展示
vue 项目引入字体图标报错、不显示等问题
热门推荐
mxf_bear的博客
05-30 2万+
问题：在项目开发时使用字体图标，发现两个问题；1、出现报错：解决方法为：把字体引入方式改为绝对路径2、不报错，但是不显示图标字体，出现方框原因可能有两种：①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入）②这个就是我遇到的问题，浪费了我好几分钟！！！记得在用到图标的地方引入问题原理后续再写...
vue引入bootsrap字体出错解决方案
小飞侠的博客
01-13 739
注释掉vue安装包中bootstrap/dist/css/bootstrap.css   264行font-family 的代码，这个问题解决
vue项目引入TrueType Collection(ttc)字体，报错Module parse failed: Unexpected character ‘‘（引入ttc字体流程）
weixin_61001537的博客
06-19 670
main.js我挂载的是common.scss文件，在这个文件当中引入了reset.scss和variable.scss文件，当然文件名称可以自定义哦~安装依赖：npm install --save-dev file-loader。最后就是在页面当中使用啦！（注意要和你设置样式名称一样哦~）
vue中@font-face引入字体，路径报错
小白正在变黑
01-19 1664
亲试有效：一般是在项目中使用了@import来引入css/scss文件的。那么就要找到这个css最终被引入的文件位置，然后相对于这个文件来写引入字体的路径。（一般这个问题容易被忽略0o.）
vue 引入字体文件
HuangsTing的博客
01-20 535
1. 下载字体文件所需的.ttf文件并引入： 2.在font.css文件，将下载好的字体文件的路径引入： @font-face { font-family: 'PMZD'; src: url('PMZD.ttf'); font-weight: normal; font-style: normal; } 3.在要使用的style里面引入font....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值