vue-cli3引入第三方字体文件

素颜马尾好姑娘i 2023-06-20 06:48 123阅读 0赞

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，效果

![20191209115524750.png][]

[20191209115524750.png]: https://img-blog.csdnimg.cn/20191209115524750.png

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关 Laravel 引入第三方类

阅读目录比如我们有个发送邮件的类`Email.php`位于`/app/Http/lib/Email`目录下 <?php namespace App\H

矫情吗；*/ 2023年10月06日 19:37/ 0 赞/ 72 阅读

相关 vue-cli3引入第三方字体文件

1，在vue-cli项目目录下创建vue.config.js文件 module.exports = \{ module: \{ rules:

素颜马尾好姑娘i/ 2023年06月20日 06:48/ 0 赞/ 124 阅读

相关 vuecli3.0全局引入jquery

之前使用jquery都是每个组件引入 import $ from 'jquery' 这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引

约定不等于承诺〃/ 2023年06月15日 09:53/ 0 赞/ 30 阅读

相关微信小程序 - 引入第三方字体（使用网络字体艺术字）

前言有时候因项目需求，可能需要一套第三方艺术字体，就像如图所示效果（店内自取 / 外卖）： ![在这里插入图片描述][20200901164205140.png_p

忘是亡心i/ 2022年12月03日 02:28/ 0 赞/ 178 阅读

相关 Layui引入第三方图标

在阿里矢量图图库中挑选图标，加到购物车 ![在这里插入图片描述][20210610155623902.png] 下载代码 ![在这里插入图片描述][waterma

浅浅的花香味﹌/ 2022年10月06日 00:57/ 0 赞/ 300 阅读

相关 idea引入第三方tomcat

1.修改pom文件，把自带的tomcat移除，增加以下配置 <exclusions> <exclusion> <groupId>org.spring

深藏阁楼爱情的钟/ 2022年05月09日 03:50/ 0 赞/ 313 阅读

相关【Angular】引入BootStrap第三方库

【背景】在照着视频敲写“竞拍商品”的例子时，使用了BootStrap框架的样式总是出不来效果，对比源码，敲了好多遍还是不行。经过了很久的搜索后，找到了一个可行的方案

小灰灰/ 2022年03月20日 03:11/ 0 赞/ 383 阅读

相关 UNI-APP引入第三方字体库问题

一、背景描述在开发APP的时候，经常需要引入第三方字体图标，由于第一次使用[UNI-APP][]这一前端混合框架做APP开发，在引入[阿里巴巴矢量图标库][Link 1]不

叁歲伎倆/ 2022年02月15日 09:23/ 0 赞/ 1829 阅读

相关 tp3.2第三方引入

、引入第三方类库 .class.php文件 1.1 类库有写namespace命名空间 1. namespace Org\\Util; 2. class Auth

以你之姓@/ 2021年12月11日 07:13/ 0 赞/ 485 阅读

相关 Angular引入第三方库

如果我们想在`Angular`中使用第三方的库，比如`jquery`或`bootstrap`等，该如果做呢？首先我们先来看看`package.json`这个文件，在目录介绍

电玩女神/ 2021年06月26日 16:06/ 0 赞/ 626 阅读