vue引入外部字体

1、下载所需要的字体，.ttf格式本文以（HYLiLiangHeiJ.ttf 为例）2、在src下新建CSS文件，文件夹中包含以下文件3、打开font.css这里注意两个问题：（1）URL里面必须是绝对路径；否则：（2）如果使用使用绝对路径，必须文件上传到自己服务器的CDN否则：@font-face {font-family: 'HYLiLiangHeiJ';sr...

马优晨

4791人浏览 · 2019-07-18 16:07:28

马优晨 · 2019-07-18 16:07:28 发布

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]')
                }
            }

不引入utils 报错：
在这里插入图片描述

5.App.vue引入字体

在这里插入图片描述

6、可在vue文件中使用字体

在这里插入图片描述

7.使用字体后效果

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^