Выбранный при начальной загрузке текст не центрируется некоторыми шрифтами - некоторые символы частично скрываются

Question

Использование этого шрифта Google Font Cairo с текстом select делает внутренний текст частично скрытым, как будто он немного смещен вниз. Проблема не существует при удалении начальной загрузки.

Пробовал разные версии Bootstrap 4.

Пример JSFiddle https://jsfiddle.net/pgmx87jv/17/

<select class="form-control"  style="font-family: 'Cairo', sans-serif;">
  <option>Village</option>
  <option>ggg</option>
  <option>Vvv</option>
</select>

Почему это происходит и как это исправить?

Answer 1

Вы можете изменить отступ при выборе form-control.Это происходит потому, что шрифт Cairo выше, чем шрифт Bootstrap по умолчанию.

<select class="form-control pt-0">
  <option>Village</option>
  <option>ggg</option>
  <option>Vvv</option>
</select>

https://jsfiddle.net/m1d5oayu/

Или используйте h-autoкласс для установки height:auto, как предложено @ IvanS95 ...

<select class="form-control h-auto">
  <option>Village</option>
  <option>ggg</option>
  <option>Vvv</option>
</select>