vue 中使用自定义字体

最新推荐文章于 2025-09-27 18:46:52 发布

原创最新推荐文章于 2025-09-27 18:46:52 发布 · 7.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这篇博客介绍了如何在网页中引入并使用自定义字体。首先，你需要下载字体文件，然后在CSS文件中通过`@font-face`规则声明字体，如阿里巴巴普惠体和汉仪天宇风行体。接着，在组件样式中指定`font-family`属性来应用这些字体。示例代码展示了如何在`.block-top`和`.block-bottom`中分别使用不同的字体，实现了字体的个性化设置。

部署运行你感兴趣的模型镜像

1.先下载字体

2.在新建的font.css文件中加入下面代码引入字体

@font-face {

font-family: 'MSYH';

src: url('阿里巴巴普惠体 L.ttf');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'HY';

src: url('汉仪天宇风行体W.ttf');

font-weight: normal;

font-style: normal;

}

3.在组件中使用字体

<style scoped lang="less">

@import "../assets/font/font.css";

.block-top{

font-family:MSYH;

}

.block-bottom{

font-family:HY;

}

效果如下