Question

我正在使用Bootstrap框架（Bootstrap 4）构建网站。我在整个网站上使用了正文的CSS属性添加了自定义字体（GeosansLight）。自定义字体使默认的引导程序表单输入显得太浅而无法引起注意。

在特定页面上，我尝试使用引导程序模板以及每个字段的占位符添加引导程序表单，但是输入格式太浅而无法读取。我尝试将字体更改为默认字体，并且表单元素再次变暗。除此之外，我还尝试使用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

您正在导入Geosans Light 字体。尝试找到相同的字体，但使用普通字体或粗体字体来解决您的问题

Answer 2

尝试添加少量字体，例如浅色，粗体，普通字体，并使用具有不同字体粗细的字体。还有一些好东西
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;
}

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

2 个答案: