首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法使用laravel/mix加载字体- webpack

问题描述: 无法使用laravel/mix加载字体- webpack

回答: 在使用laravel/mix加载字体时遇到问题,可能是由于webpack配置或字体文件路径的问题导致的。下面是解决该问题的步骤:

  1. 确保字体文件存在于正确的路径下,通常是在项目的resources/fonts目录下。
  2. 确保webpack.mix.js文件中已经正确配置了字体文件的处理规则。可以使用copy方法将字体文件复制到打包后的目录中。例如:
代码语言:txt
复制
mix.copy('resources/fonts', 'public/fonts');
  1. 如果字体文件较大,可以考虑使用字体子集化工具进行优化,以减小字体文件的大小。
  2. 在项目的CSS文件中,使用@font-face规则来引入字体文件。确保字体文件的路径正确。例如:
代码语言:txt
复制
@font-face {
    font-family: 'MyFont';
    src: url('../fonts/MyFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  1. 在使用字体的地方,通过CSS样式指定字体的名称。例如:
代码语言:txt
复制
body {
    font-family: 'MyFont', sans-serif;
}
  1. 重新运行webpack编译命令,确保字体文件被正确打包和引入。

如果以上步骤都正确执行,但仍然无法加载字体,可以尝试以下方法:

  • 检查浏览器的开发者工具,查看网络请求是否成功加载字体文件,以及字体文件的路径是否正确。
  • 检查字体文件的权限,确保字体文件可读取。
  • 检查webpack的配置文件,确保没有其他插件或配置与字体加载冲突。
  • 可以尝试使用其他字体文件进行测试,以确定是否是特定字体文件的问题。

腾讯云相关产品推荐:

  • 云服务器(CVM):提供弹性计算能力,可用于部署和运行应用程序。
  • 云存储(COS):提供高可靠、低成本的对象存储服务,可用于存储和分发字体文件。
  • 云安全中心(SSC):提供全面的安全监控和防护服务,可保护应用程序和数据的安全。

更多腾讯云产品信息和介绍,请访问腾讯云官方网站:腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WPF 加载诡异的字体无法布局

如果在系统里面存在诡异的字体,同时自己的 WPF 中有一个控件尝试使用这个字体放在界面中,那么将会在界面布局过程炸了,整个控件或者整个界面布局都无法继续 本文本来是由吕水大大发布的,但是他没空写,于是我就成为了写博客的工具人...有一个用户报告了软件在他的电脑上打不开列出本机字体列表,于是吕水大大就去远程他的设备,在用户的设备上找到了一个诡异的字体加载这个字体的时候,将会在 MS.Internal.Text.TextInterface.Font.CreateFontFace...下载代码,在代码仓库里面可以找到 不给糖就捣蛋的万圣节.TTF 这个字体,值得一说的是,诡异的字体有很多,这个字体只是一个例子。...\r\n\r\n指示输入文件 (例如字体文件) 中的错误。...同时在 UWP 如果是在第一个界面中添加以上代码,那么即使在 App.xaml.cs 使用下面代码尝试接住,应用也是继续退出 public App() {

1.3K50

Laravel Mix 初探

简介 针对 Laravel 优化了的 Laravel Mix, 提供了高效优雅的 API,用于使用几个常见的 CSS 和 JavaScript 预处理器为应用定义 Webpack 构建步骤,基本可以使到...配置 Laravel Mix 现在在根目录下就应该可以看到一个webpack.mix.js文件,他是 Laravel Mix 的配置文件,和我们平时看到的 webpack.config.js 长得不太一样...常用的case 版本控制和清理缓存 开发者经常会使用在编译后的资源文件名加上时间戳或者是唯一的token作为版本号,强迫浏览器加载全新的资源文件,而不是缓存的文件。...因此,你应该在你的视图中使用 Laravel 的全局辅助函数 mix 来正确加载名称被哈希后的文件。...如果你之前没有使用webpack,这是一个很好的入门工具。如果您以前使用过, Laravel Mix 有助于简化整个过程。

4.3K60
  • 让 F5 歇一会儿——laravel-mix 自动刷新之道

    因为近几年来大部分时假在与 Laravel 打交道,使用 laravel-mix 已成家常便饭,所以想着总结并分享一下 laravel-mix 工作流中的自动刷新之道。...要在 laravel-mix使用 hmr,不需要安装其它额外的依赖包。...安装依赖 // laravel-mix v4 yarn add -D webpack-livereload-plugin // laravel-mix v3 或更早 yarn add -D webpack-livereload-plugin...加载的模块) 浏览器当前页面所加载的前端文件 速度 修改 css 时较快,其它文件时一般 快,特别是热替换时 一般 可靠性 可靠 存在 Bug,但有特殊处理办法 可靠 使用复杂度 简单,仅需安装依赖并调用...但同时需要注意的是 laravel-mix 环境下使用 hmr 也存在一些问题(当前最新版本 4.0.15 中仍存在),例如与 mix.extract() 没法同时使用( 见 Issue ) 以及在windows

    2.4K20

    Laravel 项目中使用 Bootstrap 框架

    /bootstrap'); 这样我们在编译前端资源的时候就会将 Bootstrap 相关 js 文件加载进来。...Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用的前端打包工具,Webpack 是目前最新的、广泛使用的前端资源打包工具(之前还有 Grunt、Gulp 等),能够以模块方式处理所有前端资源...,Laravel Mix 对其提供的功能进行了封装从而避免后端开发人员大量编写 Webpack 配置命令,大多数时候我们需要在 resources/js/app.js 和 resources/sass/...后面我们会专门讲一下 Laravel Mix 的各种使用,现在你只需要知道它是怎么回事就好了。...Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js: const mix = require('laravel-mix'); mix.js('resources/js/

    3.4K31

    Laravel 项目中使用 webpack-encore

    正所谓爱之深,责之切,在对 laravel-mix 表示失望之后,我翻出了自己 star 多时的另一包 webpack-encore,虽说很早就 star 了,但之前却没试用过它,可能也是因为对于 laravel-mix...laravel-mix 迁移到 webpack-encore,只用了几个小时,并且期间相当顺利。...而我迁移的这个项目,是一个 Laravel 项目,所以下面就分享下,如果在 Laravel 项目中使用 webpack-encore 替代 laravel-mix。...项目默认 package.json 中 develop 等相关的脚本都是使用 laravel-mix 的,为了方便日常开发,现在要对它们进行一些调整,改用 webpack-cocore。...当然,更为重要的是,mix4 里因为一些 bug 而无法使用的功能,在 encore 里却正常,如 dynamic import。

    2.1K20

    引入 Laravel Mix 管理前端资源

    如果要完整介绍并构建这样的一套前端开发环境,需要引入很多额外的篇幅和前端知识,好在 Laravel 生态提供了一个 Laravel Mix 组件,该组件对 Webpack 的构建步骤做了封装,提供了一套非常简单的流式...虽然该项目是针对 Laravel 框架开发的,不过,由于是一个纯前端项目,因此可以适用于所有 Web 前端项目,现在,我们就来在博客项目中引入 Laravel Mix 管理前端资源。...安装 Laravel Mix 开始之前,需要先安装 Laravel Mix 组件需要的前端相关依赖,假设你的系统上已经安装过 Node 和 NPM 包管理器,如果没有安装的话前往 Node.js 官方下载页面.../webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" },...这样一来,我们就可以在项目中基于 Laravel Mix 管理前端资源了。 下篇教程,我们将基于 Laravel Mix 为博客项目替换主题。 (全文完)

    1.6K20

    Homestead + laravel-mix 环境下 hmr 的两种玩法

    我在前几天刚写过的《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新的几种方法,其中就有涉及 hmr(Hot Module Replacement...对于 Laravel 官方首推的 Homestead 当然也是可以的,只不过用法上有些差别,于加上 laravel-mix 本身的一些 BUG(在 issue 里搜索 hmr 结果就有好几页 :smile...1.vagrant ssh 连接虚拟机,进入项目目录后安装前端依赖 yarn install 2.在 webpack.mix.js 中调整相关配置 使用 mix.Webpack() 配置 devServer...1.从宿主机终端进入项目目录并安装前端依赖 yarn install 2.webpack.mix.js 中使用 webpackConfig 进行配置 mix.webpackConfig({ devServer...References [1] 《让 F5 歇一会儿——laravel-mix 自动刷新之道》: https://tianyong90.com/2019/04/12/rang-f5-xie-yi-hui-er-laravel-mix-zi-dong-shua-xin-zhi-dao

    1.6K10

    webpack构建优化:bundle体积从3M到400k之路

    赶紧打开chrome (disable cache): image.png 哇,吓了一跳,这打包出来的JS辣么大:lib.js 2.3M(花了14s 才加载完)、app.js 1.2M(花了9s多加载完.../bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",...--inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production...因为vue和vue-router在cdn上都提供了min版的js,已经是压缩精简版的,而vue-i18n.js的官方网站也建议使用cdn方式引入,没必要将都打包到app.js中。...效果十分明显 image.png c、除了拆分依赖包,另一个重要的优化就是压缩代码,这里使用的是uglifyjs-webpack-plugin,同样在webpack.app.config.js的plugin

    4K50

    Nginx无法加载.woff .eot .svg .ttf等字体文件的解决办法

    很久之前写过windows20008服务器无法加载woff文件的问题,文章是:解决网站部署svg/woff/woff2字体404错误的方法,今天来说下Nginx无法加载woff的问题,我目前使用的是程序是...lnmp,宝塔控制面板,使用的TP5,但是在后台访问的时候无法加载woff文件,页面提示502 bad gateway,使用f12查看开发者信息,所有的woff都是502,所有页面的小图片均已无法显示,...null;         access_log /dev/null;     } 注意,配置文件是存在的,仅仅需要添加其中的“|eot|otf|ttf|woff|woff2|svg”后缀即可,就是这些字体文件...,添加进去即可,害怕设置错误的话还可以新建一个配置段落,代码如下: #加载woff字体     location ~ \....另外如果出现“ laravel 访问路由出现404 ”则需要添加如下代码: location / {     try_files $uri/ /index.php?

    5.5K20

    前后端分离探索——MVC 项目升级的一个过渡方案

    Laravel Mix 工具,这会节省大量前端配置时间 根目录新建文件 webpack.mix.js const fs = require('fs'); const mix = require('laravel-mix...# 流程 按照示例配置一个页面 Yarn 安装前端依赖 Yarn 前端编译,此时,PHP 模板中已正确引入 Vue 访问路由,PHP 渲染模板,返回给浏览器 浏览器加载 Vue,交由 Vue 渲染页面...# 局限 不能做到全局自动加载组件 编译后的文件大小可能会很大 # 优势 可以更好地编写复杂的页面 更好的维护性 # 权限交互 ?...$resolvedArgs . ')'; }); 1 2 3 4 5 6 使用公共函数 <link rel="stylesheet" href="/<em>mix</em>/dist{{ get_version('/css...9 10 11 # <em>laravel</em>-<em>mix</em> 配置 const path = require('path') const <em>mix</em> = require('<em>laravel</em>-<em>mix</em>') const rs_root

    1.2K20

    Hexo使用more标签后图片无法加载

    关于Hexo 使用后图片无法加载 问题 我在写文章时需要用到图片,所以在socourse目录下新建了一个img目录来存放我日后文章所需用到的图片,插入图片用的是!...– more –>标签后,在打开文章会出现图片全部无法正常显示。...如下图: 解决办法 在想了一晚上后,我通过复制打开不能正常显示的图片的链接地址,并打开链接,发现图片加载的地址与我设置的相对路径地址不符,其加载的图片地址是在public/2021/12/10/**...– more –>标签的问题上,因为添加该标签会重新打开一个页面来显示完整文章内容,就因为这个操作更改了文章与图片目录之间的相对位置,导致加载图片失败。...所以解决办法很简单,只要我们知道了使用标签后文章与图片目录的位置关系,重新设置以下相对路径就可以了。比如我本来设置路径是:..

    1.2K30
    领券