2014-12-07 2 views
2

Различные шрифты сидят по-разному в этих коробках:Как получить промежуток между разными шрифтами?

enter image description here

Я пытаюсь найти способ, чтобы сделать отступы «вокруг» текст такой же, независимо от того, какой шрифт выбран. Таким образом, пространство между дном 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"; 
} 

ответ

1

Это не представляется возможным, так как это явление зависит от дизайна шрифта. CSS не имеет доступа к метрикам шрифтов. Способ, которым глифы используют вертикальное пространство, определяемое высотой шрифта (и, возможно, выходящее за пределы этого пространства), определяется дизайнером шрифтов. Нет ни одного количества, которое его описывает.

Единственное количество, связанное с метрикой шрифта, которое теоретически доступно, равно высоте x, через блок em и через свойство font-size-adjust. Последний имеет очень ограниченную и багровую поддержку. Кроме того, высота x - это только высота буквы x и аналогичных строчных букв без вставок и десендеров, поэтому это не поможет получить общую высоту глифов.

+0

Спасибо, что имеет смысл. – dtbaker

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