Размер шрифта не работает должным образом

Я проектирую макет сайта. Но я замечаю, что размер шрифта не работает должным образом. Я пишу слово «JETRO» внутри div. Высота div - 80 пикселей, а размер шрифта - 40 пикселей. Я использовал «line-height: 80px», чтобы выровнять слово «середина» сверху вниз. Но он не работает должным образом. Он занимает 25px сверху и 20px снизу, а размер шрифта показывает 35px на самом деле. Что здесь не так?Размер шрифта не работает должным образом

Мой HTML-код:

<!DOCTYPE HTML> 
    <html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>PSD to HTML</title> 
     <link rel="stylesheet" type="text/css" href="style-blog.css" media="all" /> 
    </head> 
<body> 
    <header> 
     <div id="leftRuler"> 

     </div> 
     <div id="headerContent"> 
      <div id="logo"> 
       JETRO 
      </div> 
      <div id="menu"> 
       MENU 
      </div> 
     </div> 
     <div id="rightRuler"> 

     </div> 
    </header> 

</body> 
</html>

И мой CSS кодекс:

body{ 
margin: 0; 
padding: 0; 
font-family: bebas; 
} 

header{ 
width: 100%; 
height: 80px; 
background: #b9b9b9; 
background-color:#ffff99; 
} 

#leftRuler{ 
width: 15%; 
height: 80px; 
float: left; 
} 

#headerContent{ 
width: 70%; 
height: 80px; 
float: left; 
background: #99FFFF; 
line-height: 80px; 
} 

#rightRuler{ 
width: 15%; 
right: 80px; 
float: left; 
} 

#logo{ 
height: 80px; 
float: left; 
font-size: 40px; 
display: block; 
} 

#menu{ 
float: right; 
}

источник

2015-09-20 Kallol Das

Это индивидуальный шрифт под названием «bebas». все буквы под этим шрифтом капитализируются по умолчанию. –

Я пробовал со стандартным шрифтом, и это работает .. что, вероятно, означает, что ваш пользовательский шрифт имеет другие значения пространства, которые его больше подталкивают .. установка шрифта на 40 пикселей не означает, что буква «J» равна 40px – LGSon

Что именно вы имеете в виду по "font-size показывает 35px на самом деле"? – connexo

размер шрифта не высота символов в пикселях.

Размер шрифта в пикселях не используется напрямую, он переводится в размер шрифта в точках и используется для фактического рендеринга текста.

Размер шрифта в точках не соответствует точному измерению шрифта, а размер, который делает шрифт похожим по размеру на другие шрифты при использовании с тем же самым размером точки. С шрифтом Bebas автор шрифта, очевидно, решил, что шрифт должен отображаться несколько меньше, чем обычные шрифты, возможно, чтобы компенсировать внешний вид шрифта.

Таким образом, вы не можете ожидать, что текст будет точный размер пикселя, который вы укажете. Также разные браузеры переводят и округляют немного разные, поэтому вы даже не можете ожидать, что результат будет точно таким же между браузерами.

Даже такие факторы, как параметры рендеринга системных шрифтов и экран, подключенный к компьютеру, могут повлиять на результат, поэтому вы даже не можете ожидать, что результат останется таким же, даже в том же браузере на том же компьютере.

В основном попытка управления отображением текста точно в браузерах - бесполезная работа. Вам просто нужно попытаться понять инстинкты авторов шрифтов и всегда учитывать, что есть некоторые изменения в рендеринг текста.

Вы можете настроить размер и положение в соответствии с шрифтом, который вы используете, но вы все равно должны иметь в виду, что произойдет, если посетитель не имеет доступа к шрифту (или если он не загружается), чтобы текст отображался другим шрифтом.

источник

2015-09-20 15:39:12 Guffa

Размер шрифта не работает должным образом

ответ

Смежные вопросы