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

问题描述

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

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

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

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

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

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

解决方法

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

<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 Fonts CSS API 文档了解更多信息：https://developers.google.com/fonts/docs/css2