vue2关于引入字体的步骤

最新推荐文章于 2024-04-19 14:26:12 发布

gaoyapei1993

最新推荐文章于 2024-04-19 14:26:12 发布

阅读量1.2k

点赞数 2

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/gaoyapei1993/article/details/123716663

版权

本文介绍了在Vue2项目中引入自定义字体的详细步骤，包括准备字体文件，将其置于public/static/fonts目录，创建scss文件定义字体，然后在main.js中全局注册，最后在组件中使用新字体。

摘要由CSDN通过智能技术生成

1，准备需要的字体文件

2，在静态文件夹下public的static文件夹下新建fonts文件

放入自己的字体文件，

3，在src文件夹下的scss文件下新建fonts.css文件

4在fonts.css文件内自定义字体名称

@font-face {
    font-family: 'fangzhengfangsong';
    src: url(../../../public/static/fonts/方正仿宋_GBK_0.TTF);
}
@font-face {
    font-family: 'fangzhengheiti';
    src: url(../../../public/static/fonts/方正黑体_GBK.TTF);
}
@font-face {
    font-family: 'fangzhengxiaobiaosong';