Как изменить стиль шрифта ввода формы Bootstrap с помощью Custom Font

Question

Я строю веб-сайт, используя платформу Bootstrap (Bootstrap 4). Я включил пользовательский шрифт (GeosansLight) по всему сайту, используя атрибут CSS тела. Из-за пользовательского шрифта вводимые по умолчанию входные данные формы начальной загрузки кажутся слишком легкими, чтобы их можно было заметить.

На определенной странице я пытался добавить форму начальной загрузки с использованием шаблона начальной загрузки вместе с заполнителями для каждого поля, но формат ввода слишком легкий для чтения. Я попытался изменить шрифт на шрифт по умолчанию, и элементы формы снова стали темными. Наряду с этим я также попытался сделать буквы жирным, используя атрибут 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, полужирный, обычный и использовать шрифт с разным весом шрифта. Некоторые хорошие вещи также
здесь

@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;
}

Answer 2

Вы импортируете шрифт Geosans Light . Попробуйте найти тот же шрифт, но обычный или жирный, чтобы решить вашу проблему