Question

这些是vuetify中可用的默认字体 https://vuetifyjs.com/en/styles/typography/。

如何在我的vuetify项目中添加更多带有自定义输入的字体大小？目前，我只能通过使用此代码在variables.scss文件中更新给定的字体大小来

$headings: (
    "subtitle-1": (
        "size": 93px,
        "weight": 400,
        "line-height": 1.75rem,
        "letter-spacing": 0.009375em,
        "font-family": $body-font-family,
    ),
);

但是因为'subtitle-1'是已经可用的字体，所以我可以对其进行更改。我可以在其中添加一些自定义排版吗？

Answer 1

在我使用蒙特塞拉特的情况下，创建一个名为scss的文件夹并创建一个名为variables.scss的文件

粘贴此

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

$body-font-family: 'Montserrat';
$font-size-root: 14px !default;

最后在您的全局文件（APP.vue）中粘贴

<style lang="scss">
@import "./scss/variables.scss";



v-app {
  font-family: $body-font-family !important;
}

</style>

作为推荐，请使用!important

如何在vuetify中更改默认字体？

1 个答案: