css - 如何使用自定义字体更改 Bootstrap 表单输入的字体样式

Question

我正在使用 Bootstrap 框架 (Bootstrap 4) 构建网站。我使用 body 的 CSS 属性在整个网站中包含了自定义字体 (GeosansLight)。自定义字体使默认的 Bootstrap 表单输入显得太浅而不易察觉。

在特定页面上，我尝试使用 Bootstrap 模板添加 Bootstrap 表单，以及每个字段的占位符，但输入的格式太轻，无法阅读。我尝试将字体更改为默认字体，表单元素再次变暗。除此之外，我还尝试使用 font-style: bold 属性将字母设为粗体，但表单元素没有任何变化，只是表单标签。

HTML:

<form>
    <div class="row mt-2">
      <label for="inputName" class="col-sm-2 col-form-label">Full Name</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="inputName" placeholder="Enter your full name">
      </div>
  </div>
</form>

CSS:

<style type="text/css">


input {
  font-weight: bold;
  font-size: 17px;
}

label {
  text-align: center;
}

form {
  font-weight: bold;
  font-size: 15px;

}

body {
font-family: GeosansLight;

}

@font-face { font-family: GeosansLight; src: url('GeosansLight.ttf');  }

form input {
  font-weight: bold;
  font-size: 20px;
}
</style>

我希望普通的 Bootstrap 表单输入字段足够暗，让每个人都能看到，但输出是一个非常亮的、带有占位符的褪色表单输入。当我们在占位符中键入任何内容时，生成的文本也是浅色的。 我需要添加哪些属性来使表单输入变暗，使其不受自定义字体的影响？

Answer 1

尝试添加一些字体，如 Light、bold、normal 并使用具有不同字体粗细的字体。 还有一些好东西
here

@font-face {
   font-family: 'Ubuntu';
      src: url('Ubuntu-RI-webfont.eot');
      src: url('Ubuntu-RI-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-RI-webfont.woff') format('woff'),
           url('Ubuntu-RI-webfont.ttf') format('truetype'),
           url('Ubuntu-RI-webfont.svg#UbuntuItalic') format('svg');
   font-weight: 400;
   font-style: italic;
}

@font-face {
   font-family: 'Ubuntu';
      src: url('Ubuntu-B-webfont.eot');
      src: url('Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-B-webfont.woff') format('woff'),
           url('Ubuntu-B-webfont.ttf') format('truetype'),
           url('Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
   font-weight: 700;
   font-style: normal;
}

而 html 将是

.u400 {
   font-family: 'Ubuntu', arial, sans-serif;
   font-weight: 400;
   font-style: normal;
}

.u400i {
   font-family: 'Ubuntu', arial, sans-serif;
   font-weight: 400;
   font-style: italic;
}

.u700 {
   font-family: 'Ubuntu', arial, sans-serif;
   font-weight: 700;
   font-style: normal;
}

.u700i {
   font-family: 'Ubuntu', arial, sans-serif;
   font-weight: 700;
   font-style: italic;
}