一. 如何在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. QQ群web前端分析三——pageSpeed

    使用pageSpeed插件,试试页面分析,看看有没有什么问题.等会上图 第一个问题,大部分人使用默认图片,但是这个图片的url确不一样,导致重复请求了若干次,这个...., 第二个问题,图片没有指定默 ...

  2. exec 家族库函数以及系统调用(execl,execle,execlp and execv,execvp,execve)

    (1)exec函数说明 fork函数是用于创建一个子进程,该子进程几乎是父进程的副本,而有时我们希望子进程去执行另外的程序,exec函数族就提供了一个在进程中启动另一个程序执行的方法.它可以根据指定的 ...

  3. JAVA基础之接口与内部类

    接口与内部类 目录 接口与内部类 1. Lambda表达式 1. 关于懒计算 2. Predicate接口 3. 关于方法引用 4. 关于构造器引用 5. 关于变量的作用域 2. 内部类 1. 局部内 ...

  4. tcp输入数据 慢速路径处理 && oob数据 接收 && 数据接收 tcp_data_queue

    大致的处理过程 TCP的接收流程:在tcp_v4_do_rcv中的相关处理(网卡收到报文触发)中,会首先通过tcp_check_urg设置tcp_sock的urg_data为TCP_URG_NOTYE ...

  5. 二、多线程及服务器编程总结------linux多线程服务端编程

  6. linux中几个文本文件查看命令

    Linux中,常用的文本文件查看命令介绍如下: 1. cat 用法: cat [options] filename options: -A: 显示全部. -E: 在每一行的后面加上"$&qu ...

  7. rgw的rgw_thread_pool_size配置调整

    前言 在比对rgw的不同前端的区别的时候,官方说civetweb是通过线程池来控制连接的,beast是后面加入了流控相关的,这块一直也没有调整过相关的参数,然后通过ab压测了一下,还是有很明显的区别的 ...

  8. 分布式 task_master / task_worker

    17:08:0317:08:04 在Thread(线程)和Process(进程)中,应当优选Process,因为Process更稳定,而且,Process可以分布到多台机器上,而Thread最多只能分 ...

  9. 用JavaScript做精灵图

    用JavaScript做精灵图 精灵图可以不用在给每一个小块一 一的修改位置.主要原理是找到整张的背景图与li的下标的数学关系. 这是一大张背景图,这个背景图的位置其实是有规律的,每两张之间间隔一个固 ...

  10. FL Studio音乐编曲入门教程

    有很多小伙伴给我们留言说使用FL Studio20一段时间后,虽然对这款音乐编曲软件的功能有了一个了解,但对它整个的编曲过程还不是太熟悉.所以今天我就给大家带来了FL Studio20这款音乐编曲软件 ...