1

html:

<span id="head-1">101</span>

css:

font-family: HelveticaNeueCyrBlack;
font-size: 250px;

результат в хроме

3
  • line-height: 250px; пробовали?
    – DaemonHK
    Commented 27 дек. 2017 в 12:20
  • Да. Это никак не влияет на текст в span. Я уже и шрифты менял на дефолт, но к сожалению...(
    – Andrew
    Commented 27 дек. 2017 в 12:24
  • В ответе на вопрос я уточнил, что line-height должен быть 169, забыл что равный размеру шрифта, он не сработает как вам нужно
    – DaemonHK
    Commented 27 дек. 2017 в 14:39

1 ответ 1

1

Если для фиксированного текста(типа "101"), то можно использовать следующее:

div {      
  overflow: hidden;
  border: 1px solid red;
}

div span {
  line-height: 169px;
  display: block;
  font-family: HelveticaNeueCyrBlack;  
  font-size: 250px;   
}
<div>
  <span>101</span>
</div>

Однако, если текст будет содержать выносной или свисающей элемент, то он обрежется:

div {     
  overflow: hidden;
  border: 1px solid red;
}

div span {      
  display: block;
  font-family: HelveticaNeueCyrBlack;
  line-height: 169px;
  font-size: 250px;
}
<div>
  <span>gef</span>
</div>

p.s. Про строение шрифта можно почитать здесьздесь про font-size.

3
  • 1
    Опять магические числа... Можно просто задать line-height: 169px; тоже магия, но хоть без маргинов непонятных
    – DaemonHK
    Commented 27 дек. 2017 в 14:37
  • DaemonHK, Спасибо!
    – Kniha m
    Commented 27 дек. 2017 в 14:51
  • Но это опять все зависит от конкретного шрифта, универсального решения тут вроде нет((
    – DaemonHK
    Commented 27 дек. 2017 в 15:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.