vuetify.js - 如何在 vue 中使用字体粗细？

Question

我已经安装了 vuetify 并使用了它的font-weight-类

下面是我的代码：

<template>
  <v-app>
    <p class="font-weight-black">Black text.</p>
    <p class="font-weight-bold">Bold text.</p>
    <p class="font-weight-medium">Medium weight text.</p>
    <p class="font-weight-regular">Normal weight text.</p>
    <p class="font-weight-light">Light weight text.</p>
    <p class="font-weight-thin">Thin weight text.</p>
    <p class="font-italic">Italic text.</p>
  </v-app>
</template>

我的问题是，与vuetify font-weight的示例相比，为什么medium、normal、light和thin都是相同的 font-weight （见下图）。有人知道如何解决这个问题吗？

标签： vuetify.js

Answer 1

我通过将字体导入我的app.scss找到了解决方案

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

或者只是将下面的代码附加到 html 文件中

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

有用的链接1，链接2