在 Umi 中打包与加载自定义字体

使用 Webpack 打包字体文件的时候需要使用 file-loader 来处理打包文件，在 UmiJS 3 中可通过配置文件中的 chainWebpack 函数来自定义 Webpack 的配置。

首先安装 file-loader

npm install --save file-loader

然后再umi的配置文件 ./umirc.ts 或 config.js 中的 chainWebpack 加上如下配置

export default defineConfig({// ...chainWebpack(config){config.module // 配置 file-loader.rule('otf').test(/.otf$/).use('file-loader').loader('file-loader');},
})

在全局的 less 字体样式文件中声明字体

@font-face {font-family: 'CustomFont';src: url('./font.otf');
}

最后就可以直接使用声明好的字体啦

.customFont {font-family: 'CustomFont'
}

在 Umi 中打包与加载自定义字体相关推荐

java加载自定义字体java.io.IOException: Problem reading font data.
异常信息 load font error:{} java.io.IOException: Problem reading font data.at java.awt.Font.createFont0( ...
前端加载自定义字体及速度优化
今天是2.14情人节,也是另一个重要的日子,那就是我的第一个全栈项目上线啦~~~ www.daren.com 这个是公司的官网,采用Python+Django做后端,前端也用了gulp自动化工作流,使 ...
java加载字体文件_Java的加载自定义字体文件（.TTF）
我在下面这段代码中使用,并将其与该堆栈跟踪出现:Java的加载自定义字体文件(.TTF) java.io.FileNotFoundException: font.ttf (No such file o ...
html自定义字体缓存,PixiJS：加载自定义字体
Environement: Xampp,Firefox,Pixijs,HTML,CSS 现在我尝试加载自定义字体. 我第一次加载我的Pixijs项目应运行的页面时,字体没有显示,控制台显示一些错误消息 ...
Flutter 动态加载自定义字体
Flutter中使用自定义字体场景1, 加载特定字体,在开发前字体文件就已确定,可以使用参考 flutter开发文档Use a custom font | Flutter,这里就不再描述. 场景2 ...
Android加载自定义字体出错,Android设置自定义字体的解决方案
找了很多解决方案,但是都会报错,只好边借鉴着前辈们的思路,边自己尝试改代码了QWQ 前面准备:要先把使用的字体文件放入到工具中新建一个名叫assets的文件夹,然后把字体文件复制到里面,如图成功放 ...
C# 从TTF文件加载自定义字体
原文地址:http://www.cnblogs.com/twzy/p/4922962.html
cad2006激活未找到html文件,解决cad提示“cad加载自定义文件失败未找到acad”的方法...
下图所示的提示界面大家是不是觉得很熟悉呢?这个错误提示是出现在autocad程序中的错误之一.相比无法安装等情况这个故障的解决方法比较简单,首先我们来看看具体故障:有用户在双击打开Autocad的时候 ...
QT中main函数中加载外部字体：OTF
QT中main函数中加载外部字体:OTF 我们开发的程序中,如果想使用外部下载的开源字体,同时保证在软件发布时,程序字体能保证和开发者环境下一致,且不想通过安装字体方式实现字体跟随软件时,我们需要在代 ...

在 Umi 中打包与加载自定义字体

在 Umi 中打包与加载自定义字体相关推荐

最新文章

热门文章