vue.js - 我如何在 vue 和 vuetify 中插入本地项目中的字体？

Question

我试图从我的本地项目中添加一种字体到 vuetify 并将其设置为主字体，但它不起作用。 这是我的项目: 主文件夹 上市 来源 Assets 字体的 我的字体 iranyekan.css 节点模块

这是我公开的 index.html

<style>
      @font-face {
        font-family: "IranYekan";
        src: url("../assets/fonts/IranYekan/iranyekanwebregular.woff2") format("woff2"),
        url("../assets/fonts/IranYekan/iranyekanwebregular.ttf") format("ttf"),
        url("../assets/fonts/IranYekan/iranyekanwebregular.woff") format("woff");
      }
    </style>

但它不起作用。谢谢

Answer 1

尝试更改您的链接以使用:

@/assets/fonts/IranYekan/iranyekanwebregular.ttf
or ~/assets/fonts/IranYekan/iranyekanwebregular.ttf 
or ~@/assets/fonts/IranYekan/iranyekanwebregular.ttf

不知道你的项目怎么样，vue用~或者@引用根目录，你试试看？

<style>
      @font-face {
        font-family: "IranYekan";
        src: url("~@/assets/fonts/IranYekan/iranyekanwebregular.woff2") format("woff2"),
        url("~@/assets/fonts/IranYekan/iranyekanwebregular.ttf") format("ttf"),
        url("~@/assets/fonts/IranYekan/iranyekanwebregular.woff") format("woff");
      }
    </style>