十一：字体文件处理

心谭博客

发布于 2020-04-20 16:37:34

7180

发布于 2020-04-20 16:37:34

文章被收录于专栏：YuanXinYuanXin

在自己的项目中引入中意的字体样式，是让自己舒坦的重要方式 :)

源码地址如下：

0. 课程介绍和资料

本节课的代码目录如下：

本节课的package.json内容如下：

{
    "devDependencies": {
        "css-loader": "^1.0.0",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "file-loader": "^1.1.11",
        "style-loader": "^0.21.0",
        "url-loader": "^1.0.1",
        "webpack": "^4.16.1"
    }
}

1. 准备字体文件和样式

如上面的代码目录所示，字体文件和样式都放在了/src/assets/fonts/目录下。点我直接下载相关文件

2. 编写入口文件

为了提取 css 样式到单独文件，需要用到ExtractTextPlugin插件。在项目的入口文件需要引入style-loader和css-loader:

// app.js
import "style-loader/lib/addStyles";
import "css-loader/lib/css-base";

import "./assets/fonts/iconfont.css";

3. 处理字体文件

借助url-loader，可以识别并且处理eot、woff等结尾的字体文件。同时，根据字体文件大小，可以灵活配置是否进行base64编码。下面的 demo 就是当文件大小小于5000B的时候，进行base64编码。

// webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let extractTextPlugin = new ExtractTextPlugin({
    filename: "[name].min.css",
    allChunks: false
});

module.exports = {
    entry: {
        app: "./src/app.js"
    },
    output: {
        publicPath: __dirname + "/dist/",
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: {
                        loader: "style-loader"
                    },
                    use: [
                        {
                            loader: "css-loader"
                        }
                    ]
                })
            },
            {
                test: /\.(eot|woff2?|ttf|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            name: "[name]-[hash:5].min.[ext]",
                            limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
                            publicPath: "fonts/",
                            outputPath: "fonts/"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [extractTextPlugin]
};

4. 编写`index.html`

按照上面的配置，打包好的css和js均位于/src/dist/文件夹下。因此，需要在index.html中引入这两个文件（假设已经打包完毕）：

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Documenttitle>
        <link rel="stylesheet" href="./dist/app.min.css" />
    head>

    <body>
        <div id="app">
            <div class="box">
                <i class="iconfont icon-xiazai">i>
                <i class="iconfont icon-shoucang">i>
                <i class="iconfont icon-erweima">i>
                <i class="iconfont icon-xiangshang">i>
                <i class="iconfont icon-qiehuanzuhu">i>
                <i class="iconfont icon-sort">i>
                <i class="iconfont icon-yonghu">i>
            div>
        div>
        <script src="./dist/app.bundle.js">script>
    body>
html>

5. 结果分析和验证

CMD中运行webpack进行打包，打包结果如下：

在 Chrome 中打开index.html，字体文件被正确引入：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-10-09，如有侵权请联系 cloudcommunity@tencent.com 删除

css

html

打包

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

html

打包

登录后参与评论

0 条评论

热度