vue-cli项目引入字体包

1.先下载字体文件所需的.ttf文件
2.将字体文件引入
自己在src文件定义一个common文件夹，在fonts文件夹放入下载好的.ttf文件，新建一个font.css文件
font.css文件代码

@font-face {font-family: "hyxm";// src: url('./hyxm.ttf');      //ttf文件路径src: url-loader('./hyxm.ttf');      //ttf文件路径需要用这个font-weight: normal;font-style: normal;
}

这里是fonts文件夹里面的，因为webpack.base.conf.js中的name匹配的是fonts文件夹

3.在APP.vue中引入

@import "./common/fonts/font.css";
#app {font-family: "hyxm";
}

4.在utils.js添加代码

   return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'                //添加这一行代码后再重新打包就可以了})

防止打包后路径报错问题

vue-cli项目引入字体包相关推荐

vue中怎么引入字体包（超详细）
vue中怎么引入字体包一.创建文件并添加字体包 1.在src里面的assets文件中创建text文件(没有assets文件可以自己创建一个,也可以不用此命名): 2.把字体包放入text文件,并创建 ...
前端项目如何引入字体包? 引入字体包不起效果？
因为设计师用的是IMac电脑,设计图默认使用的字体为 pingFangSC-Regular,这就需要我们做开发的引入苹方字体包以达到和设计图一致的视觉效果,(引入其他字体包同理) 先上个苹方字体 ...
vue项目导入字体包以及根据所需文字压缩字体包
前端项目使用的字体包格式为ttf,如果手上的字体包格式是otf,首先要进行格式转换使用Font Creator 传入otf文件,另存为ttf文件即可,以 SourceHanSerifCN-Light ...
Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目进入cmd命令行,输入如 ...
H5（nuxt）项目引入字体
H5(nuxt)项目引入字体闲话少说方法1: 1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.先自己定义一个font.css文件,字体文件的路径引入 @font-face ...
h5引用项目里css_H5（nuxt）项目引入字体
H5(nuxt)项目引入字体闲话少说方法1: 1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.先自己定义一个font.css文件,字体文件的路径引入 @font-face ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
IDEA中项目引入独立包打包失败问题解决（找不到包）
IDEA中项目引入独立包打包失败问题解决(找不到包) 参考文章: (1)IDEA中项目引入独立包打包失败问题解决(找不到包) (2)https://www.cnblogs.com/coderdxj/p ...

vue-cli项目引入字体包

vue-cli项目引入字体包

vue-cli项目引入字体包

vue-cli项目引入字体包相关推荐

最新文章

热门文章