自定义 Materialise CSS 样式

Question

具体化使用 'Roboto' 作为默认字体。我没有尝试（如文档提供的那样）像这样更改自定义 CSS：

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

我正在寻找的是更改 'Poppins' 字体的 h1、h2、h3、h4、h5、h6 和 p、a 元素的原始样式，包括 Extra-Bold 、粗体和中号，字体大小为 75pt、50pt、30pt 和 25pt。

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

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

我也试过html'browser-default'class，也试过：

*{
    font-family: initial;
}

字体在style.csssheet中是这样链接的：

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

而且，样式sheet也被导入了。

  <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 ' />

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

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

Answer 1

主要问题在于您的导入。有一个错字，你应该改用 https，并且你应该指定你需要的字体粗细。 500 将是 'medium'、700 'bold' 和 800 'extra-bold'

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

自定义 Materialise CSS 样式

Custom Materialize CSS Style

css

frameworks

typography

materialize