vue项目引入外部字体文件

最新推荐文章于 2025-06-25 15:35:15 发布

Lval

最新推荐文章于 2025-06-25 15:35:15 发布

阅读量954

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_42215897/article/details/103351721

vue 专栏收录该内容

35 篇文章

订阅专栏

1.将字体文件放入项目中

新建一个文件夹，将字体文件放入其中
在这里插入图片描述

2.创建一个font.css文件

在ttf同级目录下创建一个font.css文件，并将字体文件的路径引入

@font-face {  
 font-family: 'hanbao';  
 src: url-loader('huawen.ttf'); 
 font-weight: normal;  
 font-style: normal;  
 }

注意：我这里是cli生成的项目，ttf的文件配置在build/webpack.base.conf.js文件内配置过了，根据配置，这里的src我们要用url-loader引入

3.在main.js中引入

import './assets/font/font.css'

然后就可以在需要的地方使用了
例：

.main .card-box .money {
        font-size: 56px;
        font-weight: 600;
        color: #FF4E4E;
        font-family: 'hanbao';
    }

如果不是cli生成的项目需要在webpack的配置文件里要加上解析.ttf文件的规则

module: {
    rules: [
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }
    ]
}