Различные шрифты сидят по-разному в этих коробках:Как получить промежуток между разными шрифтами?
Я пытаюсь найти способ, чтобы сделать отступы «вокруг» текст такой же, независимо от того, какой шрифт выбран. Таким образом, пространство между дном y
и границей должно быть таким же, как верхняя часть T
и граница.
(я надеюсь, что имеет смысл?)
можно вручную регулировать высоту строк/отступы, чтобы каждый шрифт сидеть красиво в середине коробки, но было бы неплохо, если бы был какой-нибудь автоматический способ сделать это.
jsfiddle для этого экрана: http://jsfiddle.net/dtbaker/4qkv2ncL/2/
HTML:
<div id="bg">
<div class="text">
<span>Asdgh YiyjJT</span>
</div>
<div class="text">
<span class="font1">Asdgh YiyjJT</span>
</div>
<div class="text">
<span class="font2">Asdgh YiyjJT</span>
</div>
<div class="text">
<span class="font3">Asdgh YiyjJT</span>
</div>
</div>
CSS:
@import url('https://fonts.googleapis.com/css?family=Special+Elite:400,700,400italic,700italic|Lora:400,700,400italic,700italic|Lobster:400,700,400italic,700italic');
#bg{ background-color: #000; padding:20px; }
.text{
padding:20px;
}
.text span{
color:#CCC;
background:#FFF;
font-size:60px;
font-weight:bold;
line-height:1em;
padding:2px;
}
.text span.font1{
font-family:"Special Elite";
}
.text span.font2{
font-family:"Lora";
}
.text span.font3{
font-family:"Lobster";
}
Спасибо, что имеет смысл. – dtbaker