Как с помомощью CSS изменить кегель шрифта (не font-size)?

Question

[Essa]

Суть вопроса: при использовании определенного шрифта упал border-bottom

<div class="contacts_feadback">
                            <ul class="list header__feadback">
                                <li class="contacts__item"><a class="feadback" href="#">Заказать обратный звонок</a></li><li class="contacts__item">
                                    <a class="feadback" href="#">Написать сообщение</a></li>
                            </ul>
                            </div>

.feadback {
    color: #0055aa;
    font-size: 1.4em;
    border-bottom: 1px dotted #0055aa;
    text-decoration: none;}

, необходимо его поднять выше к базовой линии шрифта

Answer 1

[Yakov Vylegzhanin]

Используйте свойство line-height.

Comments

[Essa]

испробовано. увы, не помогает

[Yakov Vylegzhanin]

Essa: где посмотреть можно? Ссылку кинь.

[Essa]

Yakov Vylegzhanin: joxi.ru/LmGeOBRcRzVV6A

[Yakov Vylegzhanin]

Essa: да епрст. Ссылку на живой пример можно?

[Essa]

Yakov Vylegzhanin: mialana.ru/test с line-height можете сами потестить

[Yakov Vylegzhanin]

В Мозилле, Хроме и Опере корректно отображается.

[Essa]

Yakov Vylegzhanin: прошу прощения, шрифты не подключены были. перепроверьте, пожалуйста

Answer 2

[Максим]

Кегль - это высота шрифта ??

Comments

[Essa]

www.ruled.ru/font-css.html
"font-size

Определяет кегель (высоту символов) шрифта. "

[Глеб Кемарский]

Кегель -.https://ru.wikipedia.org/wiki/%D0%9A%D0%B5%D0%B3%D...

[Максим]

Essa: в общем я скрин выложил - обычный Arial видно как его извратил ??

Answer 3

[Глеб Кемарский]

UPD 2: Если задать подчёркивание фоновой картинкой или градиентом, то можно управлять формой, цветом и положением подчёркивания. Примеры - по ссылкам в статье "Альтернативный способ подчёркивания текста" на сайте Артёма Поликарпова.

UPD 1: Завернуть текст внутри ссылки в span и немного его опустить.

.feadback span {
  position: relative;
  top: 2px;
}

<div class="contacts_feadback">
  <ul class="list header__feadback">
    <li class="contacts__item"><a class="feadback" href="#"><span>Заказать обратный звонок</span></a></li>
    <li class="contacts__item">
      <a class="feadback" href="#"><span>Написать сообщение</span></a></li>
  </ul>
</div>

https://jsfiddle.net/glebkema/vmrt8y2u/

Comments

[Essa]

обнуление отступов не помогает поднять нижнюю границу

[Глеб Кемарский]

Да, увидел, спасибо. Из моих вариантов остаётся только margin-bottom у .contacts__item.

[Essa]

Глеб Кемарский: тоже не влияет

[Глеб Кемарский]

Essa: Границу не поднимает, конечно. Зато отодвигает строку снизу.

[Essa]

Глеб Кемарский: нужно поднять бордер

[Глеб Кемарский]

Essa: Вариант: завернуть текст внутри ссылки в span и немного его опустить.

<span style="position: relative;  top: 4px;">Написать сообщение</span>

[Глеб Кемарский]

Essa: Вот так предлагаю. Это решает проблему?

.feadback span {
  position: relative;
  top: 2px;
}

<div class="contacts_feadback">
  <ul class="list header__feadback">
    <li class="contacts__item"><a class="feadback" href="#"><span>Заказать обратный звонок</span></a></li>
    <li class="contacts__item">
      <a class="feadback" href="#"><span>Написать сообщение</span></a></li>
  </ul>
</div>

Демо: https://jsfiddle.net/glebkema/vmrt8y2u/

[Глеб Кемарский]

Essa: Вариант со вложенным спаном подходит? Что доработать?

[Essa]

Глеб Кемарский: не подходит, это костыли. Вопрос был об изменении высоты шрифта, а не о позиционировании элементов. Проблема заключается в том, что шрифт "выше" чем сами символы. Проблема частично решена через замену файлов шрифта, а создал ее генератор сайта fontsquirrel.com

[Глеб Кемарский]

Essa: Спасибо за пояснение!

[Глеб Кемарский]

Essa: Можно задавать подчёркивание фоновой картинкой или градиентом. В этом случае можно управлять формой, цветом и положением подчёркивания. Примеры - по ссылкам в статье "Альтернативный способ подчёркивания текста".