vue引入外部字体报错问题

最新推荐文章于 2025-03-28 14:53:11 发布
最新推荐文章于 2025-03-28 14:53:11 发布
阅读量1.6k 收藏 4
点赞数 5
分类专栏： 基础 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/BLUESKYHOST/article/details/105778767
版权

报错的原因是路径导致的

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

先上正确的写法

@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/

vue用import方式引入ttf字体文件报错及解决方法
格の调
08-29 3702
关于在vue项目中引入ttf格式的字体文件，基本工作： 下载下来字体文件，新建一个font文件夹，把字体文件放进去，在新建一个font.css文件（可以不用新建，直接在主css文件里写），把字体文件@font-face引入进css里。 注：@font-face也可以直接在scss文件里写或引入，不一定要在css文件里。 前面工作做完后，运行报错O(∩_∩)O 网上查了好半天，普遍都说是配置文件webpack.config.js中没有配置解析字体的模块。 用到的方法就是在build -> webpa
vue中css引用新字体（css引用新字体不成功）
weixin_42609363的博客
04-11 2371
vue中css引用新字体（css引用新字体不成功） 废话就不多说了，直接上步骤 在网上下载自己所需要的字体文件，我是在https://www.fonts.net.cn/官网直接搜索字体的（使用的时候注意一下注意事项），我看别人在其他地方下载了.ttf、.eot、.woff、.svg文件，我用的网站里面好像只有.ttf文件 下载完成后将文件放在项目文件夹里，我的项目里有一个字体文件夹 新建一个对应的css文件，内容如下： @font-face { font-family: "whjztfont";
vue引入外部字体包报错(You may need an appropriate loader to handle this file type.)
weixin_44781409的博客
08-12 1万+
vue项目引入外部字体包，然后报这个错 解决方案
VUE3引入字体问题
最新发布
weixin_51926913的博客
03-28 318
VUE3导入字体问题
vue中引入字体无效（记录）
H2659541076的博客
05-24 6537
vue中引入字体无效（记录）
vue引入外部字体包报错(Source code omitted for this binary file)
Charis--Cai
06-12 5407
vue项目引入外部字体包，然后报这个错，在网上搜，都是说使用webpack打包的时候才会出现这个错（原因是缺少loader） 解决方案：将字体包转换一下，转换地址为https://transfonter.org/ 然后下载下来 引入就OK了。 纯属做笔记 ...
vue中引入字体资源遇到的问题
weixin_44528408的博客
04-29 697
"@"是jsconfig.json/tsconfig.json配置的资源路径。"~"是webpack中css-loader提供的导入资源语法。这种写法能加载字体，但是无法应用字体。这种写法会报错，甚至无法通过编译。这种写法可以加载并应用字体。
解决iview打包时UglifyJs报错的问题
10-18
本文将详细介绍如何解决在使用iview库进行Webpack打包时遇到的UglifyJs报错问题。 ### 知识点概述 1. **iview库与ES6语法**：iview是一个基于Vue.js的高质量UI组件库。在最新版本中，iview大量使用了ES6+的特性，...
优化vue项目首页加载过慢
宇哥大男神的博客
03-07 6693
最近碰到vue项目打包上线后，第一次打开首页后会出现空白、加载时间过长的情况，百度了几种优化的方法，自己总结一下。 1.首先要弄清楚为什么会出现这种情况 在Chrome浏览器打开项目的时候，按F12可以看页面在加载的情况，结果发现是这个app.js太大，居然加载了有9秒之多 找到这个“病毒”后，我们就来对症下药。 项目用webpack打包的过程 打包的app.js有892kb，已经提示过大，另外...
CSS3 使用@font-face引入字体的兼容性方案及优化
chovitaminljy
02-27 1119
引入第三方字体一定要注意字体版权问题 前言 承接上文web 端字体兼容性适配之后，好久没有总结 CSS3 引入字体 @font-face 相关的文章了。一是在掌握 @font-face 的基本使用要领后没遇过兼容性问题，二是觉得 @font-face 已经兼容 ie9+及现代浏览器了，兼容性问题基本可以忽略不计了。事与愿违的是，在多次实战中发现引入第三方字体会出现许多奇形怪状的问题，譬如字体文件的编码问题引发字体可以在桌面系统正常使用而在 Web 端不起作用、字体文件中英文或其他外语的字体行高差异问题、.
vue js 引入font.css报错
素味平生的博客
12-01 827
报错截图 解决方法 1. 将字体文件放在 static 下面 2. 在 font.css 文件中用绝对路径引入字体 3. 在 App.vue 中引入css（@import "assets/css/font.css"） 效果展示
解决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
vue 项目引入字体图标报错、不显示等问题
热门推荐
mxf_bear的博客
05-30 2万+
问题：在项目开发时使用字体图标，发现两个问题；1、出现报错：解决方法为：把字体引入方式改为绝对路径2、不报错，但是不显示图标字体，出现方框原因可能有两种：①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入）②这个就是我遇到的问题，浪费了我好几分钟！！！记得在用到图标的地方引入问题原理后续再写...
vue引入bootsrap字体出错解决方案
小飞侠的博客
01-13 720
注释掉vue安装包中bootstrap/dist/css/bootstrap.css   264行font-family 的代码，这个问题解决
vue项目引入TrueType Collection(ttc)字体，报错Module parse failed: Unexpected character ‘‘（引入ttc字体流程）
weixin_61001537的博客
06-19 542
main.js我挂载的是common.scss文件，在这个文件当中引入了reset.scss和variable.scss文件，当然文件名称可以自定义哦~安装依赖：npm install --save-dev file-loader。最后就是在页面当中使用啦！（注意要和你设置样式名称一样哦~）
vue中@font-face引入字体，路径报错
小白正在变黑
01-19 1614
亲试有效：一般是在项目中使用了@import来引入css/scss文件的。那么就要找到这个css最终被引入的文件位置，然后相对于这个文件来写引入字体的路径。（一般这个问题容易被忽略0o.）
vue 引入字体文件
HuangsTing的博客
01-20 499
1. 下载字体文件所需的.ttf文件并引入： 2.在font.css文件，将下载好的字体文件的路径引入： @font-face { font-family: 'PMZD'; src: url('PMZD.ttf'); font-weight: normal; font-style: normal; } 3.在要使用的style里面引入font....
vue-cli3.0 引入外部字体并使用
良人非良
05-09 3285
遇到要在项目中引入一些外部字体，我使用的是思源字体 cli2的我还没试过，现在的方法是cli3的， 不用配置config文件就可以 第一步： 去下载想要引入的字体的字体包，找ui要或者网上自己去搜 第二步：将要的字体放在资源目录下，看自己项目需求要放哪里，创建一个css文件 第三步： 在fonts.css文件中引入想要的字体 // 这是fonts.css 可以设置多种字体 // 注意：font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字 @font-...
vue3无法显示app
01-13
某些情况下，引入外部资源如样式表、字体图标等也可能引发兼容性方面的问题；特别是当这些附加功能涉及到特定版本号匹配的时候更需谨慎处理。另外需要注意的是像 Taro UI 这样专门为小程序设计的框架与标准 Web 版本...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值