css - 自定义 Materialize CSS 样式

Question

Materialize 使用“Roboto”作为默认字体。我没有尝试(如文档所提供的那样)像这样更改自定义 CSS:

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

我正在寻找的是更改 h1、h2、h3、h4、h5、h6 和 p、a 的原始样式，不同权重的“Poppins”字体元素，包括 Extra-Bold、Bold 和 Medium字体大小为 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 禁用 Materialize 的特定样式规则并个性化 CSS 排版样式？

Answer 1

主要问题在于您的导入。有一个错字，你应该改用 https，并且你应该指定你需要的字体粗细。 500 表示“中等”，700 表示“粗体”，800 表示“超粗体”

此外，在选择器中指定字体粗细时，您不使用字符串，而是使用预定义值之一或数值。 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;
}