Question

使用'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禁用实现和个性化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;
}

自定义实现CSS样式

1 个答案: