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

Question

我尝试将本地项目中的字体添加到 vuetify 并将其设置为主字体，但它不起作用。这是我的项目：主文件夹公共src资产字体我的字体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>