vue-cli3引入第三方字体文件
1,在vue-cli项目目录下创建vue.config.js文件module.exports = {module: {rules: [{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',...
·
1,在vue-cli项目目录下创建vue.config.js文件
module.exports = {
module: {
rules: [
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
2,在src目录下新建font目录,并创建font.css文件,并将字体文件放进该目录
font.css:
@font-face {
font-family: 'BEBA';
src: url('BEBA.ttf');
}
3,在项目中引入,比如在APP.vue中引入,在子页面Index.vue中使用
APP.vue
<template>
<div id="app">
<router-link to="/Index">首页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
@import "./font/font.css";
</style>
Index.vue
<template>
<div>
首页
<div class="tst">01</div>
</div>
</template>
<style lang="less" scoped>
.tst{
font-family: BEBA;
}
</style>
4,效果
更多推荐
已为社区贡献18条内容
所有评论(0)