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>

Answer 2

我相信您的问题是您的组件没有引用导入的字体。

为了进行验证，我添加了用于roboto-fontface，material-design-icons的npm软件包，然后将它们导入到main.js中（如果您使用的是webpack）。

import 'roboto-fontface/css/roboto/roboto-fontface.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';

然后，vuetify将能够在不引用样式的情况下本地访问它们。

Answer 3

我遇到了同样的问题-在index.html中具有链接，但是roboto没有显示

我的问题是我在plugins/vuetify.ts

中导入vuetify的方式

导入不正确

import Vuetify from 'vuetify';

正确导入

import Vuetify from 'vuetify/lib';