Misans global字体在vue中如何使用

一、字体下载

字体官网链接：https://hyperos.mi.com/font/zh/download/

下载之后如下所示：

解压之后如下所示：

我们只需要提取其中一部分文件即可

其中MiSans目录下只需要MiSans VF.tff文件

_MACOSX目录下需要

二、使用步骤

1、将Misans global字体文件添加到项目中。可以将字体文件放在项目的assets目录下。

2、在项目的App.vue中，通过CSS添加字体样式规则。

<style>
/* 在App.vue或者通过main.js中的全局样式文件中 */
@font-face {
  font-family: 'MisansGlobal';
  src: url('@/assets/MiSans VF.ttf/MiSans VF.ttf') format('truetype'); /* 修改为字体文件实际路径 */
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MisansGlobal', sans-serif; /* 使用MisansGlobal作为首选字体 */
}
</style>

3、在组件中使用字体，现在你可以在Vue组件的样式中直接使用MisansGlobal字体了。

<template>
  <div style="float: left">
    <h5>中华人民共和国</h5>
  </div>
</template>

<style scoped>
/* 在某个Vue组件中 */
h5 {
  font-family: 'MisansGlobal', sans-serif;
}
</style>

效果如下：