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

Question

在我的 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>

Answer 1

您可以使用范围样式，因此它仅适用于其父级和子级的元素。您可以阅读更多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>