vue引入外部字体

最新推荐文章于 2024-08-16 14:18:10 发布

马优晨

最新推荐文章于 2024-08-16 14:18:10 发布

阅读量4.7k

点赞数

分类专栏： vue 文章标签： vue引入外部字体 vue使用外部字体 vue使用字体 vue引用字体前端项目引入外部字体

本文链接：https://blog.csdn.net/qq_24147051/article/details/96433037

版权

vue 专栏收录该内容

90 篇文章 14 订阅

订阅专栏

1、下载所需要的字体，.ttf格式本文以（HYLiLiangHeiJ.ttf 为例）

2、在src下新建CSS文件，文件夹中包含以下文件

在这里插入图片描述

3、打开font.css

这里注意两个问题：
（1）URL里面必须是绝对路径；
否则：
在这里插入图片描述
（2）如果使用使用绝对路径，必须文件上传到自己服务器的CDN
否则：

@font-face {
  font-family: 'HYLiLiangHeiJ';
  src: url('https://img.csgo.com.cn/csgo/ef/93/ef93dac6227d93600dc14bdafb6b72241563429818.ttf')format('truetype');
  font-weight: normal;
  font-style: normal;
}

这里我使用了 CDN地址~

4、配置webpack.base.conf.js 文件

utils 是第三方库函数，需要自己定义。如果使用CDN的话，options可以直接注释掉

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