vue 本地添加字体

1.先下载字体文件所需的.ttf文件

• 我这里想引入的是华文行楷字体
• 百度后下载了一个3M多的ttf文件

2.将字体文件引入

• 自己定义一个文件夹，放入下载好的.ttf文件

• 先自己定义一个font.css文件，将下载好的字体文件的路径引入

1. @font-face {

2. font-family: "textxxx";   //重命名字体名称

3. src: url('stxingka.ttf');

4. font-weight: normal;

5. font-style: normal;

6. }

• 在App.vue中的style里引入

1. <style lang="less" rel="stylesheet/less">

2. @import "./common/font/font.css";

3. </style>

• 在webpack的配置文件里要加上解析.ttf文件的规则

1. module: {

2. rules: [

3. {

4. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

5. loader: 'url-loader',

6. options: {

7. limit: 10000,

8. name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

9. }

10. }

11. ]

12. }

 

如何使用  

font-family：textxxx