时间戳

首页 > 解决方案 > Vuetify 字体在生产和开发中是不同的

vue.js - Vuetify 字体在生产和开发中是不同的

问题描述

我注意到我部署的应用程序使用与开发应用程序不同的字体。我尝试了多种在部署的应用程序中设置字体的方法，但我将其默认设置为Roboto. 我尝试过多种解决方案，但似乎没有一个能覆盖默认字体 CSS。

这是我SCSS的App.vue组件。

@font-face {
  font-family: 'ITC Avant Garde Gothic Std Extra Light';
  font-style: normal;
  font-weight: normal;
  src: local('ITC Avant Garde Gothic Std Extra Light'),
  url('./fonts/ITCAvantGardeStdXLt.woff') format('woff');
}

$heading-font-family: 'ITC Avant Garde Gothic Std Extra Light';
$font-family: 'ITC Avant Garde Gothic Std Extra Light';
$body-font-family: 'ITC Avant Garde Gothic Std Extra Light';
$title-font: 'ITC Avant Garde Gothic Std Extra Light';

.v-application {
  [class*='text-'] {
    font-family: $font-family, 'ITC Avant Garde Gothic Std Extra Light' !important;
  }

  font-family: $font-family, 'ITC Avant Garde Gothic Std Extra Light' !important;
}

Chrome 中的开发 CSS

开发 CSS

开发 CSS

Chrome 中的生产 CSS

生产标头

在此处输入图像描述

为所有元素设置默认字体的正确方法是什么？

标签： vue.jsvuetify.js

解决方案

首先，您正在直接更改.v-application课程，这是一种不好的做法。请使用官方方式使用 SASS 变量对其进行更改。这是链接。

$body-font-family: 'ITC Avant Garde Gothic Std Extra Light';

我知道您正在使用$body-font-family，但我很确定变量不起作用，因为您已将它们添加到App.vueSCSS 中。删除.v-application类并正确遵循指南以使其正常工作。

在您的 src 目录中创建一个名为 sass、scss 或 styles 的文件夹，并使用名为 variables.scss 或 variables.sass 的文件。vuetify-loader 会自动将你的变量引导到 Vue CLI 的编译过程中，覆盖框架默认值。

推荐阅读