如何在 vue-vuetify 项目中使用自定义谷歌字体类？答案

【问题标题】：How to use custom google fonts classes in vue-vuetify project?如何在 vue-vuetify 项目中使用自定义谷歌字体类？
【发布时间】：2020-06-03 08:57:03
【问题描述】：

我在我的 vue-vuetify 项目中使用 Inter 字体。我想知道有什么方法可以直接在我的项目中使用 Inter 字体类吗？

Thin、Extra-light、light、medium 等是 Inter 字体中可用的类。如何在我的项目中直接使用这些类？

更多内容请参考此链接

https://fonts.google.com/specimen/Inter?selection.family=Inter:wght@100

如何在我的项目中应用任何类，例如 Thin？

目前，我通过在我的项目中声明 CSS 并根据每个类设置 font-weight 属性来做到这一点。但是，它与这些课程不同。

例如，我声明了一个css类，即

.headline-5 {
    letter-spacing: 0.46px;
    color: #000000;
    opacity: 1;
    font-size: 23px;
    font-weight: 100;
}

与 Inter Regular 具有相同的类。这种方法是否正确或任何其他方法都是可能的？

【问题讨论】：

您的意思是您需要将headline-5 显示为与Inter Thin 相同的字体？
嗯。我对我的问题做了一个小的改动。现在请看一下。基本上我想使用Inter Thin，所以我想问我需要在我的css中声明headline-5还是有什么方法可以直接使用Inter Thin？
Is this the right approach? ——我会说，是的。另一种方法是通过element.style.fontWeight 设置属性。

标签： css vue.js vuejs2 vuetify.js

【解决方案1】：

与 Inter Regular 具有相同的类。这种方法是否正确或任何其他方法都是可能的？

我认为一个好的方法是为Inter Regular 创建一个基类，例如：

.headline-5 {
    letter-spacing: 0.46px;
    color: #000000;
    opacity: 1;
    font-size: 23px;
    font-weight: 400;
}

和一个瘦类修饰符，只是为了更新font-weight，比如：

.headline-5.thin {
    font-weight: 100;
}

然后你可以在任何你喜欢的地方使用Regular和Thin字体版本：

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400&display=swap');
.container {
  font-family: 'Inter', sans-serif;
}

.headline-5 {
  letter-spacing: 0.46px;
  color: #000000;
  opacity: 1;
  font-size: 30px;
  font-weight: 400;
}

.headline-5.thin {
  font-weight: 100;
}

<div class="container">
  <p class="headline-5 thin">Almost before we knew it, we had left the ground.</p>
  <p class="headline-5">Almost before we knew it, we had left the ground.</p>
</div>

【讨论】：