关注各种黑科技
B站UP主,编程教学,游戏玩家,挂B,金牛座

使用webpack打包前端工程4 打包字体

字体一般用的很少,和图片一样 用 'file-loader'
rules添加

       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader'
         ]
       }

测试字体
https://github.com/grpc/grpc.github.io/blob/master/fonts/roboto/Roboto-Regular.woff
https://github.com/grpc/grpc.github.io/blob/master/fonts/roboto/Roboto-Regular.woff2
下载后放到src里

src/style.css

 @font-face {
   font-family: 'MyFont';
   src:  url('./Roboto-Regular.woff2') format('woff2'),
         url('./Roboto-Regular.woff') format('woff');
   font-weight: 600;
   font-style: normal;
}

  .hello {
    color: red;
   font-family: 'MyFont';
    background: url('./icon.png');
  }

npm run build

Hash: 92801554d69fac75b86a
Version: webpack 4.25.1
Time: 419ms
Built at: 2018-11-15 10:24:53
                                 Asset      Size  Chunks             Chunk Names
2751ee43015f9884c3642f103b7f70c9.woff2  48.1 KiB          [emitted]  
 ba3dcd8903e3d0af5de7792777f8ae0d.woff  60.3 KiB          [emitted]  
                             bundle.js  77.1 KiB       0  [emitted]  main
  f1b22c1302733468166d7ff3eeb39633.png    39 KiB          [emitted]  
Entrypoint main = bundle.js

目前为止 一共生成了4个文件

渲染如下

WOFF格式说明
https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF

转载请注明出处
分享到: 更多 (0)

评论 0