自定义具体化 CSS 样式答案

【问题标题】：Custom Materialize CSS Style自定义具体化 CSS 样式
【发布时间】：2019-03-24 19:56:36
【问题描述】：

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 禁用 Materialise 的特定样式规则和个性化 CSS 排版样式？

【问题讨论】：

您的代码是错字还是实际行？ http://fonts.googleapis.com/css family=Poppins 应该是 http://fonts.googleapis.com/css?family=Poppins
另外，字体粗细是数字，从 100 到 900，而不是字符串；额外的粗体应该是 800。我不确定属性值中的所有空格都可以。

标签： css frameworks materialize typography

【解决方案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;
}

【讨论】：