自定义实体化CSS样式

Question

Materialise使用'Roboto'作为默认字体。我没有尝试（由文档提供）更改自定义CSS，如下所示：

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

我正在寻找的是改变h1，h2，h3，h4，h5，h6和p的原始风格，'Poppins'字体的元素以不同的重量包括Extra-Bold，Bold和Medium with font-尺寸为75pt，50pt，30pt和25pt。

我为每个元素尝试过自定义CSS，包括：

 font-size: 30pt; 
 font-weight: 'Extra-Bold' !important;

我也尝试了html'browser-default'类，并尝试过：

*{
    font-family: initial;
}

字体在style.css表中链接如下：

@import url(http://fonts.googleapis.com/css family=Poppins);

而且，样式表也是导入的。

  <link href = ' css/materialize.min.css ' type = ' text/css ' rel = ' stylesheet ' media = ' screen,projection ' /> 
  <link href = ' css/styles.css ' type = ' text/css ' rel = ' stylesheet ' media = ' screen,projection ' /> 

我做了几个测试，包括或不是那些东西。

如何直接使用Materialize或自定义CSS禁用实体化的特定样式规则并个性化CSS排版样式？

Answer 1

主要问题是你的导入。有一个拼写错误，你应该使用https，你应该指定你需要的字体权重。 500将是'中等'，700'粗体'和800'超大胆'

此外，在选择器中指定font-weight时，不使用字符串，而是使用其中一个预定义值或数值。 https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

@import url('https://fonts.googleapis.com/css?family=Poppins:500,700,800');

h1, h2, h3, h4, h5, h6, p, a {
  font-family: 'Poppins', sans-serif;
}

h1 {
  font-weight: 800;
}