在vuetify中更改默认字体

vue.js Vue.js

古一村村Gil

2020-03-13

我不知道如何在vuetify中更改默认字体。我一直在./node_modules/vuetify中寻找正确的变量，但找不到它。

理想情况下，我不会在模块中进行任何更改，而是希望从模块外部覆盖此类变量。

第1542篇《在vuetify中更改默认字体》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
伽罗MandyTony 2020.03.13

我不能保证这是“最佳实践”。但是考虑到没有关于如何正确执行此操作的文档，我将告诉您如何完成此操作。

我正在使用Nuxt Webpack模板，因此我的文件结构可能与您的文件结构略有不同，但是概念是相同的。

我有一个静态资产文件夹。在该文件夹中，我有一个全局css文件。我下载了我正在使用的字体作为文件，并将其也添加到我的静态目录中。但是您几乎可以将它放在任何地方。

这是我添加到全局CSS文件中的代码：

@font-face{
            font-family: **any name you want to give the font**;
            src: url(**location in directory**) format("opentype");
            }

然后，您只需像往常一样将其添加到样式规则中即可

    *{
    font-family: **the same name you gave it above**;
 }
   h1{
    font-family: **the same name you gave it above**;
 }

等等...

请记住输入正确的格式。如果您的文件以.otf格式下载，则为opentype。如果为.ttf，则为truetype。

我还没有弄清楚如何从CDN中包含字体。如果我弄清楚了，我会告诉你。

YOC58560390 2020.03.13

最简单的方法是将font-family设置为on body。如果您正在使用webpack并导入Vuetify手写笔条目，则main.styl可以$font-family使用所需的任何字体简单地覆盖变量。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android