更改vuetify中的默认字体

4 回答

• -3

  我无法保证这是“最佳做法” . 但考虑到没有关于如何正确执行此操作的文档，我将告诉您我是如何完成此操作的 .

  我正在使用Nuxt webpack模板，因此我的文件结构可能与您的文件结构略有不同，但概念是相同的 .

  我有一个静态资产文件夹 . 在该文件夹中，我有一个全局css文件 . 我下载了我用作文件的字体，并将其添加到我的静态目录中 . 但你可以把它放在任何地方 .

  这是我添加到我的全局CSS文件的代码：

  @font-face{
              font-family: **any name you want to give the font**;
              src: url(**location in directory**) format("opentype");
              }
  

  然后你就像平常一样将它添加到样式规则中

  *{
      font-family: **the same name you gave it above**;
   }
     h1{
      font-family: **the same name you gave it above**;
   }
  

  等...

  请记住输入正确的格式 . 如果您的文件下载为.otf，则为opentype . 如果它是.ttf它是truetype .

  我还没想出如何在CDN中加入字体 . 如果我确实想到这一点，我会告诉你 .

  回复于 2024-05-15T07:28:27+08:00
• 3

  最简单的方法是在 body 上设置font-family . 如果您正在使用webpack并导入Vuetify手写笔条目 main.styl ，则只需使用您想要的任何字体覆盖 $font-family 变量即可 .

  回复于 2024-05-15T07:28:27+08:00
• 9

  材料设计指南

  Link here

  回复于 2024-05-15T07:28:27+08:00
• 1

  我注意到，至少在最新版本的Vuetify中，您需要同时指定 $body-font-family 和 $heading-font-family 以将所有内容的字体从Roboto更改为覆盖中的其他内容（在these instructions之后） . 似乎有必要重新定义 $headings ，因为它在 _variables.styl 中定义并依赖于 $heading-font-family . 请注意，Vuetify在2.0中将为moving to SCSS，因此此时将有一个新进程 .

  $body-font-family = 'Barlow Condensed', sans-serif
  $heading-font-family = 'Barlow Condensed', sans-serif
  $headings = {
    h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },
    h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },
    h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },
    h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },
    h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },
    h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },
    subheading: { size: 16px, weight: 400 },
    body-2: { size: 14px, weight: 500 },
    body-1: { size: 14px, weight: 400 },
    caption: { size: 12px, weight: 400 },
    button: { size: 14px, weight: 500 }
  }
  

  回复于 2024-05-15T07:28:27+08:00