nuxt vuetify 谷歌字体答案

【问题标题】：nuxt vuetify google fontnuxt vuetify 谷歌字体
【发布时间】：2019-07-23 06:40:33
【问题描述】：

我将 Nuxt 与 vuetify 一起使用。我想使用谷歌字体。不幸的是，无法用 main.styl 文件覆盖默认字体 Roboto。 main.stly 的目标是覆盖 vuetify 样式。我怎么可能用我的字体（也是按钮）覆盖所有内容。非常感谢您的帮助

nuxt.config.js

{
    rel: 'stylesheet',
    href:
      'https://fonts.googleapis.com/css?family=Noto+Serif'
  }
css: [
'~/assets/style/app.styl',
'~/assets/style/main.styl'css:],

main.styl

body{
font-family: 'Noto Serif', serif;}

image 01

image 02

【问题讨论】：

你可以试试，body{font-family: 'Noto Serif', serif !important;}
感谢您的帮助。不幸的是，它没有成功
也许，<style> html { font-family: 'Noto Serif', serif; } </style> 在你的 layouts/default.vue 中
感谢您的帮助。那正是我所想。不幸的是它不起作用
在这里查看答案。 stackoverflow.com/questions/51436344/…

标签： vuetify.js nuxt.js google-font-api

【解决方案1】：

不知道它是否仍然相关，但您可以尝试以下方法：

在你的nuxt.config.js:

vuetify: {
    customVariables: ['~/assets/variables.styl']
}

在*/assets/variables.styl:

$body-font-family = 'Noto Serif', serif

【讨论】：

【解决方案2】：

在 nuxt.config.js 中你可以添加如下，它会自动从谷歌字体中获取。

您不必在 scss 文件中指定字体。它会自动为您执行此操作。

【讨论】：

【解决方案3】：

这样对我有用：在 app.styl 中，您将其指定为样式的入口点：

$body-font-family = 'Ubuntu'
@require '~vuetify/src/stylus/main'

【讨论】：

感谢您的帮助。对我来说太糟糕了，它不起作用。看图片 02