HTML 中使用的某些字体看起来与 google 字体不同

Question

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

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

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

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

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

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

Answer 1

您必须首先 link 字体（最好在 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

HTML 中使用的某些字体看起来与 google 字体不同

Certain Fonts used in HTML looks different than google fonts

html

css

fonts

google-font-api

google-fonts