一. 如何在Vue或React项目中使用自定义字体

在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求。那么怎么在项目中使用自定义字体呢?

其实实现起来并不复杂,可以借用CSS3 @font-face 来实现。

本文着重介绍一下 webpack 项目如何正确打包引入的自定义字体。

可以访问 这里 查看更多关于大数据平台建设的原创文章 或 webpack系列之loader及简单的使用

@font-face有什么用

总结一下就是:用户借助该规则,可以为引入的字体包命一个名字,并指定在哪里可以找到它(指定字体包的存储路径)后,就可以像使用通用字体那样去使用它了。

具体实现步骤

例如现在的需求是:需要在项目中使用 KlavikaMedium-Italic 字体。

则只需以下三个步骤即可。

1. 将字体包放入项目目录下

这里放到根目录下的 tool/fonts 文件夹里。

2. 在index.css文件中定义

@font-face {
 font-family: 'myFont';
 src: url(tool/fonts/KlavikaMedium-Italic.otf);
}

3. 使用自定义字体

新建一个index.vue文件,引入样式:

import './index.css'
<template>
<h1>使用自定义字体</h1>
<style>
 h1 {
   font-family: 'myFont'
}
</style>
</template>

效果如下

二. webpack项目如何正确打包自定义的字体

1. 打包时报错

既然在本地开发环境实现了效果,于是就使用 webpack 打包准备上线,却发现 webpack 在打包过程中报错:

2. 打包时为什么会报错

我们在定义自定义字体时使用URL指定了字体包的路径,由于 webpack 默认是无法处理 css 中的 url 地址的,因此这里会报错。

3. 解决报错

3.1 认识file-loader

这时就需要借助 loader 来大显身手了,解决这个问题需要使用 file-loader,它主要干了两件事儿:

  • 根据配置修改打包后图片、字体包的存放路径;

  • 再根据配置修改我们引用的路径,使之对应引入。

3.2 安装file-loader

yarn add file-loader

3.3 配置file-loader

在 webpack.config.js 中,配置file-loader:

module.exports = {
 module: {
   rules: [
    {
       // 命中字体包
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       // 只命中指定 目录下的文件,加快Webpack 搜索速度
       include: [paths.toolSrc],
       // 排除 node_modules 目录下的文件
       exclude: /(node_modules)/,
       loader: 'file-loader',
    },
  ]
}
}

再次执行打包命令,不再报错。

4. 自定义字体为什么不生效

于是将打包出来的 dist 目录重新部署到服务器上后访问页面,却发现由于找不到字体导致没有生效:

从图中可以看出,http请求字体包的路径为:根目录下(打包出来的静态文件index.html所在目录)的 css/620db1b997cd78cd373003282ee4453f.otf

4.1 字体不生效的原因

看了一下打包命令生成的 dist 目录结构:

├── 620db1b997cd78cd373003282ee4453f.otf
├── css
│   ├── backend.66a35.css
│   └── backend.66a35.css.map
├── favicon.ico
├── images
│   ├── bg.5825f.svg
│   ├── data-baseTexture.c2963.jpg
│   ├── data-heightTexture.6f50d.jpg
│   └── logo.7227a.png
├── index.html
└── js
  ├── backend.66a35.js

却发现,字体包和 index.html 是在同一级。因此字体无法生效的原因就很明朗了:

  • 由于http请求的字体包路径与实际的存放路径一致,就导致了404;

  • 找不到字体包的实际路径,因此使用的字体无法生效。

4.2 字体不生效的解决办法

可以通过修改字体包打包后的实际存储路径去解决这个问题,在 webpack.config.js 中,借助 options 参数可以继续给 file-loader 设置更多的配置项:

module.exports = {
 module: {
   rules: [
    {
       // 命中字体包
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       // 只命中指定 目录下的文件,加快Webpack 搜索速度
       include: [paths.toolSrc],
       // 排除 node_modules 目录下的文件
       exclude: /(node_modules)/,
       loader: 'file-loader',
       // 新增options配置参数:关于file-loader的配置项
       options: {
         limit: 10000,
         // 定义打包完成后最终导出的文件路径
         outputPath: 'css/fonts/',
         // 文件的最终名称
         name: '[name].[hash:7].[ext]'
      }
    },
  ]
}
}

再次打包,生成的 dist 目录结构如下:


├── css
│   ├── backend.66a35.css
│   ├── backend.66a35.css.map
│   └── fonts
│       └── KlavikaMedium-Italic.620db1b.otf
├── favicon.ico
├── images
│   ├── bg.5825f.svg
│   ├── data-baseTexture.c2963.jpg
│   ├── data-heightTexture.6f50d.jpg
│   └── logo.7227a.png
├── index.html
└── js
  ├── backend.66a35.js

可以看到字体包正如配置时预期的那样存储在 css/fonts 目录下面。

重新部署项目,再次查看:

这一次 http 请求的字体包路径与实际的存放路径一致,因此自定义字体生效。

可以通过下面这个梳理流程图看的更清楚一些:

三. 总结

为什么本地开发的时候可以看到字体,部署到服务器后却看不到了呢?

  • 由于 webpack 项目在本地开发中使用的是 webpack-dev-server,实时编译后的文件都保存到了内存当中,引用字体包的时候使用的是绝对路径,因此在本地开发中使用的自定义字体能够生效;

  • 使用webpack打包后的 dist 目录,字体包的实际存储路径与 http 请求字体包的路径不一致,因此导致找不到字体包;

  • 借助 file-loader 解决 webpack 打包报错,通过使用 options 参数去设置字体包在打包后的实际存储路径,从而解决问题。

关注微信公众号

欢迎大家关注我的微信公众号阅读更多原创文章:

webpack项目如何正确打包引入的自定义字体?的更多相关文章

  1. webpack项目如何正确打包引入的自定义字体

    webpack项目如何正确打包引入的自定义字体 一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字 ...

  2. 在vue项目中正确的引入jquery和bootstrap

    <script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 一.第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jq ...

  3. 在vue项目中正确的引入jquery

    最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的. 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jqu ...

  4. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(六)Electron打包,同时构建客户端和web端

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  5. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  6. Webpack 2 视频教程 017 - Webpack 2 中分离打包项目代码与组件代码

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  7. Vue -- webpack 项目自动打包压缩成zip文件

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能 ...

  8. webpack项目调试以及独立打包配置文件

    webpack项目调试 -sourcemap webpack配置提供了devtool这个选项,如果设置为 ‘#source-map’,则可以生成.map文件,在chrome浏览器中调试的时候可以显示源 ...

  9. vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目

    使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这 ...

随机推荐

  1. PyTorch-pycharm配置

    接上一篇文章: https://www.cnblogs.com/daisy-fung1314/p/soft-install-note1.html 上一篇安装好了PyTorch,Anaconda,pyc ...

  2. CSS3之animation属性

    CSS中的animation属性可用于为许多其他CSS属性设置动画,例如颜色,背景色,高度或宽度. 每个动画都需要使用@keyframes这种at-rule语句定义,然后使用animation属性来调 ...

  3. UNP——第六章,多路转接IO——select

    int select(int nfds, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct timeval *timeout); ...

  4. JXLS2.4导出Excel

    1.添加依赖:http://mvnrepository.com/artifact/org.jxls <dependency>     <groupId>org.jxls< ...

  5. 控制算法PID-理解分析1

    以下内容是来自网络上的,本人觉得有道理,拷贝下来,由于没有找到最源头的出处,没有注明来自何方. 转载,下面说法应该更通俗易懂一家庭,每次需要开支的时候丈夫P都要拿卡去取钱.需要多少取多少,因为银行最低 ...

  6. Unity Lod

    LOD是Level Of Detais 的简称,多细节层次,根据摄像机与物体距离,unity会自动切换模型.一般离摄像机近的时候显示高模,离摄像机远的时候显示低模,借此来提升性能. 如果你在Blend ...

  7. 安恒DASCTF 四月战 WP

    web1 打开提就是源码审计 考点:反序列化POP链.反序列化字符串逃逸 show_source("index.php"); function write($data) { ret ...

  8. Camtasia对录制视频字幕编辑的教程

    我们小时候会有这样的疑问,电视剧上的字幕是怎么做成的呢.字幕又是怎么不会从一幕到下一幕而产生不对应的呢.这就是影视的后期处理的结果了,利用视频的编辑软件,工作者们可以在特定的时间内加上相对应的台词,然 ...

  9. 从维基百科等网站复制数据和公式到MathType里编辑

    在我们写论文的时候,经常会需要用一些实际案例以及数据,而这些数据和案例有很大一部分可以直接在网络上找到.但是有时候也会发现我们想要的内容和公式,从网页上复制粘贴后太模糊,不适合打印和投影.就需要我们将 ...

  10. java运算符与程序逻辑控制

    一.运算符 java中的运算符大致分为四种:数学运算符,关系运算符.逻辑运算符.位运算 1.数学运算符:即咱们平常说的加减乘除运算,这种运算是分先后顺序的,如果想要优先进行运算,建议加上小括号,使其运 ...