更改vuetify中的默认字体不起作用(vue-cli 3)[Vuetify 1.X] [英] Change default font in vuetify is not working (vue-cli 3) [Vuetify 1.X]

问题描述

我知道问题 change-default-font-in-vuetify 在SO中，但是它没有解决我的问题，因为它是在vue-cli-3出现之前发布的，因此那里的想法不适用于此，

I'm aware of the question change-default-font-in-vuetify in SO, but it doesn't address my problem as it was posted before vue-cli-3 came out, so the ideas there don't apply here as that, the official docs from Vuetify on how to change themes and other options don't have any valid step for when the project is created with vue-cli 3.

到目前为止，我的尝试是这样的:
-vue create fooproject(使用默认配置，但是即使我不使用默认配置，而是选择项目中想要的内容，并手动选择css-preprocessor作为手写笔，它也不起作用)
-vue添加vuetify
-它创建一个插件目录:src/plugins，在其中存储vuetify.js
-在HelloWorld组件中添加v-btn只是为了知道字体是否有效.
-然后我应该可以导入../stylus/main.styl，我在其中:

So far my attempts go like this:
- vue create fooproject (using default config, but even if I don't use the default but cherrypick what I want in the project and select the css-preprocessor as stylus manually it won't work)
- vue add vuetify
- it creates a plugin dir: src/plugins, where it stores vuetify.js
- add a v-btn in the HelloWorld component just for knowing if the font had effect
- Then I should be able to import ../stylus/main.styl, where I have:

@import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
@import '~vuetify/src/stylus/main'

我什至尝试使用@import'〜vuetify/src/stylus/main'，是否还要添加其他手写笔加载程序依赖项或其他内容?因为这正是Vuetify网站上不推荐的内容.

I even tried with @import '~vuetify/src/stylus/main' , do I have to do also vue add additional stylus-loader dependencies or anything plus? Because that's exactly what it's NOT recommended on Vuetify's website.

错误日志:没有错误，我只是继续在材质按钮中使用Roboto字体

Error log: no errors, I just keep seing Roboto font in my material buttons

有任何评论吗?

其他尝试: 我尝试遵循 Jacob E编写的步骤.道森，但我可能错过了一些超级傻的东西.

Other attempts: I tried to follow the steps written by Jacob E. Dawson but I'm missing something super silly probably.

推荐答案

因此，我重新快速浏览了一下，最后，如果使用vue-cli 3创建了一个项目，那真是太愚蠢了(自定义选项或默认选项)，然后显然在组件App.vue中，我不得不从样式部分中删除字体系列，因为它覆盖了CSS:

So I just took a quick and fresh glance back to this, at the end it was something silly, if a project is created with vue-cli 3 (either custom choices or default), then obviously in the component App.vue I had to take out font-family from the style section as it overwrites the CSS:

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif; /* this was it */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

这篇关于更改vuetify中的默认字体不起作用(vue-cli 3)[Vuetify 1.X]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！