html - 如何在实现 css 中更改一个部分的字体大小？

Question

我试图在一个页面部分中放入大量文本。我在我的网站上使用了 materialize css 框架，但我不知道如何在这一节中更改字体大小。

这是我的部分:

#submissions {
  font-size: 10px !important;
}

<section id="submissions" class="white">
  <div class="row">
    <div class="col s12">
      <div class="section">
        <br/><br/>
        <h4 class="text-grey center-align">Submissions</h4>
        <div class="divider"></div>
        <div class="col s6">
          <!-- And here is a lot of content that I want to contain -->
          test test  test test  test test  test test  test test  test test 
        </div>
      </div>
    </div>
  </div>
</section>

为此，我尝试使用 styles.css，如下所示:

#submissions {
    font-size: 10px !important;
}

谁能给我一些建议？

Answer 1

可以使用 Sass 自定义 materialize 服务的默认样式表以满足您的需求。 (无论如何你应该使用 Sass 因为它是 awesome )。

下载Sass version , 在里面你会找到每个组件的 scss 文件。在 _typography.scss 中全局字体大小设置在开头:

html{
  line-height: 1.5;

  @media only screen and (min-width: 0) {
    font-size: 14px;
  }

  @media only screen and (min-width: $medium-screen) {
    font-size: 14.5px;
  }

  @media only screen and (min-width: $large-screen) {
    font-size: 15px;
  }

  font-family: $font-stack;
  font-weight: normal;
  color: $off-black;
}

你可以在这里看到我们从 14px 开始并响应地向上移动到 15px。如果你更改它并保存，sass 将使用更新的值自动重新编译一个 materialize.css。请注意，如果您想更改标题标签的全局设置，您可以在 _variables.scss 中这样做:

$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
$off-black: rgba(0, 0, 0, 0.87) !default;
// Header Styles
$h1-fontsize: 4.2rem !default;
$h2-fontsize: 3.56rem !default;
$h3-fontsize: 2.92rem !default;
$h4-fontsize: 2.28rem !default;
$h5-fontsize: 1.64rem !default;
$h6-fontsize: 1.15rem !default;

最后，让文本在 div 中随意 float 不是一个好习惯。我会包裹在 p 标签中:

<div class="col s6">
          <!-- And here is a lot of content that I want to contain -->
          <p>test test  test test  test test  test test  test test  test test</p>
        </div>

实际上最后，您始终可以像这样在您的 css 文件中覆盖基本字体大小:

body {
    font-size: 16px;
}