webpack專案如何正確打包引入的自定義字型
一. 如何在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專案如何正確打包引入的自定義字型
一. 如何在Vue或React專案中使用自定義字型 在開發前端專案時,經常會遇到UI同事希望在專案中使用一個炫酷字型的需求。那麼怎麼在專案中使用自定義字型呢? 其實實現起來並不複雜,可以借用CSS3 @font-face 來實現。 本文著重介紹一下 webpack 專案如何正確打包引入的自定義字型。 可以訪
CSS3中引入多種自定義字型(font-face)
今天在HTML中發現了一個問題,提供給我們預設的字型有很多,但是除了那些“黑體”、“宋體”、“楷體”等支援中文字型之外,其餘的都不知道中文字型,如果我們需要用自己喜歡的字型怎麼辦呢?CSS3中是否可以引入自定義下載的字型呢?如果可以我們應該怎麼引入?帶著這一系列
fabric.js自定義字型的引入
引入外掛 <script src="/fontfaceobserver-master/fontfaceobserver.js"></script> css引入字型 <style>
在Xcode專案裡使用自定義字型的方法
第一步:下載字型(一般是.ttf或者.otf檔案) 第二步:將字型拷貝到專案中去(注意:兩個打鉤的地方,很容易不注意導致後面的步驟搜尋不到字型) 第三步:開啟info.plist檔案,在下面增加一行,key值改為 Fonts provided by applicati
專案中使用自定義字型
在專案中有時需要進行個性化定製,會使用到一些個性化的特有字型。而iOS自帶的字型無法滿足需求。這時就需要用到自定義字型。如下:1 下載 ttf或者ttc格式的字型 一般UI會給或者自己網上找 字型口袋,搜字網 裡面可以找到一些;2 將字型託到專案中 3 info 裡面新增記住
Spring Boot 引入自定義yml
abstract profile boot pos 人性化 trac cnblogs bstr strac 喜歡yml配置文件格式的人性化,也喜歡properties配置文件管理方式的人性化, 那麽下面我們就來看一下 yml 是如何配置和使用類似properties管理方
在mui中引入自定義的字體圖標
引入 mil 矢量圖 mat clas conf eight iconfont type 字體圖標可以到阿裏巴巴矢量圖上下載。 將下載好的iconfont.ttf放進mui/dist/fonts裏面。在mui.css中加入以下代碼。 @font-face {
minigui:自定義字型檔案的安裝位置(install location for custom font)
我們的基於minigui的嵌入式系統專案中使用了True Type字型,原以以為只要把字型檔案應用程式所在路徑下的字型資料夾(res/font)下就可以了,但實際執行時報錯了: NEWGAL>PCXVFB: /usr/local/bin/gvfb 12695 miniStudi
css基礎及其例項:常用選擇器、顏色五中寫法、字型樣式、自定義字型、盒模型及其樣式設定
<html lang="en"><head> <meta charset="UTF-8"> <title>css樣式</title> <style>
關於delphi FireMonkey中IOS匯入自定義字型的問題
標題:關於delphi FireMonkey中IOS匯入自定義字型的問題 問題: 在之前從官方文章中學習了自定義字型,在安卓和win中顯示正常,但在IOS中一直顯示不正確 解決: 開啟工程根目錄的info.plist.TemplateiOS.xml檔案 編輯info
解析網頁自定義字型(二)
解析網頁自定義字型(二) 介紹 背景知識 TrueType字型 fontTools 字型檔案解析庫 xml.dom.minidom xml程式碼解析庫 matplotlib 繪圖工具包 pytesseract oc
Unity通過圖片自定義字型
通過匯入一張圖片到Unity,把圖片上的字元分割,再通過指令碼轉換為適用的字型檔案。 1.圖片處理 圖片: 處理: 2.編輯器擴充套件程式碼 /* *R0-V1.0 *Modify Date:2018-11-29 *Modifier:ZoJet *M
十一月專案小結(實現自定義底部以及自適應軟鍵盤Dialog)
自定義Dialog 自定義CustomDialog繼承父類Dialog //style:自定義Dialog樣式 public CustomDialog(Activity activity , int style) { super(activity,sty
vue專案引用 iView 元件——自定義元件樣式不生效
開發過程中,專案引用了iView元件。但是有些樣式不是我們想要的,這時候就需要自己寫樣式了。 <style scoped>這個寫法大家一定都不陌生。。。。當 <style> 標籤有 scoped 屬性時,它的 CSS 只作用於當前元件中
碼農裝13寶典系列之五:Ubuntu自定義字型縮放級別
目前主流顯示器都有一個很高的解析度,而使用預設的解析度會使字型顯示過小,單純地調整解析度又容易讓字看起來發虛。 系統提供了一個字型縮放級別調整的功能。Windows初始化時就已經為使用者設定好了,而Ubuntu只有兩個選項:100%、200%,顯然不能滿足需求。 那怎麼辦? 這裡需要
關於android自定義字型顏色和點選改變字型顏色
先看效果圖 上面的為點選按下的效果圖 上面的為預設的(鬆開按鈕)的效果圖 首先我們先在values資料夾下新建一個color.xml檔案 這檔案就是配置我們要使用的顏色 程式碼如下 <?xml version="1.0" encoding
vue-cli中如何建立並引入自定義元件
vue-cli中如何建立並引入自定義元件 1.在components(專門放元件的檔案)下建立一個header.vue檔案 2.在App.vue檔案裡新增如下程式碼 <my-head></my-head> &nbs
C# winform 安裝程式打包(自定義操作)
(一),安裝程式 以前用vs製作過安裝程式,現在把步驟寫出來,有幫助的大家一定要頂哦 第一步:建立工程 1.開啟vs,新建專案->其他專案型別->安裝和部署(這個子項下面有安裝專案和Web安裝專案等,安裝專案就是普通的桌面程式安裝,Web安裝就是安裝網
在html中展示自己設計的字型(使用自定義字型庫實現資料加密)
在iconfont這麼發達的年代,作為前端設計工程師使用font awesome 是十分頻繁的,而“png圖”樣式圖示現在已經應用的比較少了,追溯其原因還是瀏覽器核心的渲染速度提升和字型庫多瀏覽器(包括手機)的支援,向量字型不會出現模糊的情況等等。從最早html4時代把圖示做
Webstorm自定義字型大小
webstrom前面文章講到了,前端開發神器,這裡就不多說了。 首先,講一下如何更改工具欄字型大小。File-Settings 看到如圖這個介面,把框起來的地方打鉤,就可以更改字型型別和字型大小