Каков размер шрифтов при указании «px» в CSS?
Я пытаюсь точно определить, что px означает размер шрифта с точки зрения выделенного места на странице, и результаты, которые я получаю, не соответствуют моим ожиданиям.
У меня создалось впечатление, что использование пикселей в сочетании с font-size означало, что вертикальное пространство, занимаемое типографикой, будет соответствовать указанному значению. Например, если бы я указал font-size: 16px, строка текста с этим правилом имела бы высоту 16px. Обратите внимание, что я не ожидал, что фактический глиф будет иметь высоту 16px, но браузер выделит 16px для отображения глифов.
Вот код, который можно использовать в качестве справочника, чтобы я мог объяснить, что я ожидал увидеть и что вижу на самом деле:
.style-it {
box-sizing: border-box;
margin: auto;
width: 500px;
height: 500px;
border: 5px solid black;
padding: 20px;
font-size: 150px;
font-family: sans-serif;
}<html>
<div class = "style-it">
<div>
CSS
</div>
<div>
IS
</div>
<div>
AWESOME
</div>
</div>
</html>У меня есть статическая высота 500px, установленная на моем style-it div, у которого есть 5px border и 20px padding. Следовательно, содержимое моего div имеет высоту 450px. С моим предыдущим пониманием font-size и px, я ожидал бы, что три строки текста на font-size из 150px идеально заполнят этот 450px контента, но это не так.
Я поместил каждую строку текста в отдельный div, чтобы мы могли ясно видеть, что каждая строка немного больше (173px в Chrome), чем моя спецификация 150px.
Итак, что здесь происходит? Неужели сами глифы на самом деле имеют высоту 150px, а «прямоугольник» вокруг них регулируется произвольно в соответствии с каким-то внутренним правилом браузера?
Есть ли способ узнать наверняка, что «у меня есть контейнер высотой Xpx, и я могу идеально уместить там Y строк текста, установив их font-size на Zpx»?
Просто интересная проблема, с которой я столкнулся, на которую я не мог найти хорошего ответа. Я не знаю, насколько это полезно в реальном мире, но мне было интересно узнать, сможет ли кто-нибудь ответить.
Обновлено: Я должен был быть немного яснее в том, о чем я спрашивал. У меня нет проблем с выяснением того, как уместить текст внутри div, но меня скорее интересует, почему, как указано в дублированной связанной статье, значение font-size не того же размера, что и em-square. Другими словами, почему в такой ситуации даже необходимо указывать line-height или 1em?
Для всех, кто сталкивается с этим, в связанном вопросе есть отличная статья, которую я искал: http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#lets-talk-about-font-size-first
@ksav Если я прав, полагая, что автор имеет дело с проблемой XY, то реальная проблема, которую они хотят решить, не является дубликатом связанного вопроса.
Истинный. Я только что прочитал ответ @Michal, и он, кажется, объясняет, что за операцию пытается выяснить вероятно.
Должен ли я сказать, что граница не считается частью ширины, так как я помню, как создавал треугольники с шириной 0 и устанавливал ширину в пикселях для границ, поэтому это было бы 500-40, а не 500-40-10. которые кажутся именно лишними пикселями, которые, кажется, появляются с ur css, плюс высота строки также является пересекающейся концепцией, которую вы тоже должны учитывать
Ответы 1
Ваша линия не совсем по высоте 150px, потому что line-height и text-size - это две разные вещи.
Используйте свойство CSS line-height и установите для него значение 1em (что означает, что высота строки будет того же размера, что и размер текста), и ваше содержимое будет точно по высоте 450px.
.style-it {
box-sizing: border-box;
margin: auto;
width: 500px;
height: 500px;
border: 5px solid black;
padding: 20px;
font-size: 150px;
line-height: 1em; /* add this line */
font-family: sans-serif;
}<html>
<div class = "style-it">
<div>
CSS
</div>
<div>
IS
</div>
<div>
AWESOME
</div>
</div>
</html>Совершенно уверен, что, если это не указано, у браузера есть свои собственные значения по умолчанию для высоты строки, которые он будет использовать для соответствия размеру шрифта с некоторым дополнительным интервалом. Единственный способ убедиться, что ваш контейнер точно такой же высоты, что и ваш размер шрифта, - это указать высоту строки
Хороший ответ, если немного бросить вызов кадру. Я подозреваю, что исходный вопрос - это проблема XY: они действительно хотят иметь возможность уместить N строк в область, они думают, что лучший способ сделать это - вычислить это по пикселям, когда действительно лучший способ - отрегулировать линию -высота собственности.
@GregSchmit Вопрос не в поиске «наилучшего способа» для выполнения задачи, а только в том, чтобы спросить, почему этот конкретный метод не является жизнеспособным решением, когда он может показаться на некотором расстоянии.
@ Mr-Programs 150 является правильным, поскольку ширина границы (10 пикселей) включена в высоту элемента благодаря свойству box-sizing.
@TylerBurki Тогда поздравляю: вы задали повторяющийся вопрос, на который уже был дан ответ. Я проявил милосердие, предполагая, что ваша настоящая проблема не была решена этим дубликатом; этот ответ - то, как вы добиваетесь того, чтобы текст аккуратно помещался в контейнеры, как вы описали.
@GregSchmit Извинения, никакого вреда не предполагается, просто хотел прояснить вопрос
@TylerBurki Не проблема! Оглядываясь назад, я понимаю, что мой ответ кажется грубым, но это не было так задумано.
Я рекомендую принять ответ @Michal, даже если это немного проблема с кадром (не отвечает на точный заданный вопрос). Я подозреваю, что у вас проблема с XY. Вы действительно просто хотите идеально уместить N строк в контейнер, но вы думаете, что лучший способ сделать это - вычислить пиксели, однако изменение
line-heightкажется (мне) лучшим решением, поскольку зная, как разные браузеры могут отображать шрифт быть несостоятельным.