HTML 中使用的某些字体看起来与谷歌字体不同答案

【问题标题】：Certain Fonts used in HTML looks different than google fontsHTML 中使用的某些字体看起来与谷歌字体不同
【发布时间】：2021-05-28 05:33:03
【问题描述】：

在谷歌文档中，对于Montserrat 字体，他们有January 这个词看起来像这样（这与我想要的设计相同）：

在我的代码中，我使用相同的格式，但我在浏览器中看到的是完全不同的字体。这是我的代码：

<div class="event-date">January</div>

.event-date {
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
}

这就是我在浏览器中看到的（与谷歌字体完全不同）：

有没有办法让它看起来像谷歌字体？

【问题讨论】：

确保将字体链接到您的代码，检查答案。

标签： html css fonts google-font-api google-fonts

【解决方案1】：

您必须首先链接字体（最好在head 标记中），因为该字体不是操作系统的一部分。当网络浏览器找不到字体时，它会使用操作系统的默认字体。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">

或者您也可以将其导入您的 CSS 文件中。

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

查看 Google 字体 CSS API 文档了解更多信息：https://developers.google.com/fonts/docs/css2

【讨论】：