javascript - vuetify模板中的字体，如何更改？

在我的Vue项目文件index.html中添加以下文本：

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

从Vuetify中添加组件工具栏，但在工具栏中显示不正确

如何更改工具栏中的字体？

<template>
  <v-toolbar color="lime accent-1" height="60px">
    <v-toolbar-side-icon>
      <v-icon>android</v-icon>
    </v-toolbar-side-icon>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down abc">
      <v-btn flat>Signup</v-btn>
      <v-btn flat>Login</v-btn>
    </v-toolbar-items>
  </v-toolbar>
</template>

最佳答案

您可以使用范围样式，因此它将仅应用于其父级和子级的元素。您可以阅读更多here

在您的情况下，您需要将类应用于v-toolbar元素，如下所示：

<template>
  <v-toolbar color="lime accent-1" height="60px" class="change-font">
    <v-toolbar-side-icon>
      <v-icon>android</v-icon>
    </v-toolbar-side-icon>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down abc">
      <v-btn flat>Signup</v-btn>
      <v-btn flat>Login</v-btn>
    </v-toolbar-items>
  </v-toolbar>
</template>

<script>
</script>

<style lang="stylus" scoped>
.change-font {
    font-family: "Arial", Helvetica, sans-serif;
}
</style>