Misans global字型在vue中如何使用

周文豪發表於2024-04-14
Vue

一、字型下載

字型官網連結：https://hyperos.mi.com/font/zh/download/

MiSans Global 是由小米主導,聯合蒙納字型檔、漢儀字型檔共同打造的全球語言字型定製專案。

下載之後如下所示：

解壓之後如下所示：

我們只需要提取其中一部分檔案即可

其中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>

效果如下：

相關文章