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

【问题标题】：How to change the font-style of a Bootstrap form input with Custom Font如何使用自定义字体更改 Bootstrap 表单输入的字体样式
【发布时间】：2019-01-18 16:43:05
【问题描述】：

我正在使用 Bootstrap 框架（Bootstrap 4）构建一个网站。我使用 body 的 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 表单输入字段足够暗，每个人都能看到，但输出是一个非常浅的、带有占位符的褪色表单输入。当我们在占位符中键入任何内容时，生成的文本也很浅。我需要添加哪些属性来使表单输入变暗，使其不受自定义字体的影响？

【问题讨论】：

标签： css html bootstrap-4

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

【讨论】：

【解决方案2】：

您正在导入 GeosansLight 字体。尝试找到相同的字体但正常或粗体来解决您的问题

【讨论】：

我尝试了一种不同的字体，现在似乎可以正常显示表单，但我想在整个网站上保留相同的字体，同时使表单元素足够粗以可见，有没有办法这样做？