Google 字体 CSS 自定义

Question

我正在使用 Google 字体 CDN 在我的项目中使用 Montserrat。

使用 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;
}

Google 字体 CSS 自定义

Google Fonts CSS customization

html

css

fonts

google-fonts