谷歌字体 CSS 自定义

Question

我正在使用 Google 字体 CDN 在我的项目中使用蒙特塞拉特。

使用 CDN 应用 CSS 所产生的结果与我计算机上本地安装的字体不同。

以下是使用 CDN 的结果：

这是使用本地安装字体的结果：

您可以注意到本地安装的字体更粗。我希望使用 CDN 获得与使用本地安装的字体相同的结果。

这是我的代码：

body{
    font-family: 'Montserrat', sans-serif;
}
.medium-25{
    font-size: 25px;
    font-weight: 500;
}
.regular-50{
    font-size: 50px;
}
.bold-italic-72{
    font-size: 72px;
    font-weight: 700;
    font-style: italic;
}

<div class="container">
    <p class="regular-50">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
    <p class="bold-italic-72">Lorem ipsum dolor sit.</p>
    <p class="medium-25">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque eveniet      fugiat
        maiores quod sapiente vel, voluptatum. Delectus est fugiat fugit illo, quibusdam tempora          voluptatem. Atque
        doloribus, enim et illum libero reprehenderit saepe ut vero.
        <br>
        <br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam deserunt dolorum exercitationem fuga
        fugiat incidunt laboriosam mollitia nihil nisi officia possimus rem repellendus repudiandae rerum sapiente
        voluptatibus, voluptatum. Cupiditate!</p>

</div>

Answer 1

从外观来看，您在 CDN 中选择了不同的字体，可能在 CND 字体中列出了多个版本的字体，例如 regular medium bold。您必须查看特定的字体页面才能看到不同的粗细。

尝试：

<link href="https://fonts.googleapis.com/cssfamily=Montserrat:400,600&display=swap" rel="stylesheet">

注意 400,600 这些是您可用的字体粗细

body{
    font-family: 'Montserrat', sans-serif;
}
.regular-50{
    font-size: 50px;
    font-weight: 600;
}