Web Typography Cinch Box для ввода - PullRequest
Новая
       8

Web Typography Cinch Box для ввода

0 голосов
/ 07 декабря 2011

При использовании, например, тега <h1>, существует ли формула многократного использования для получения внешней границы этого элемента, чтобы ИДЕАЛЬНО следовать за краями типа? Теоретически я ожидал бы, что это сработает: 

h1{
   display: block;
   font-family: sans-serif;
   font-size: 38px;
   line-height: 100%;
   height: 38px;
}

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

h1{
   display: block;
   font-family: sans-serif;
   font-size: 38px;
   line-height: 28px;
   height: 35px;
}

Вот еще один рабочий пример. 

h1{
   display: block;
   font-family: sans-serif;
   font-size: 25px;
   line-height: 19px;
   height: 22px;
}

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

Кроме того, было бы неплохо, если бы какое-либо решение также работало со шрифтами @ font-face, но я понимаю, что здесь есть, что принять во внимание. (как верхнее выравнивание, которое происходит только на Mac).

Существует ли такая формула? Можно ли написать один? Как насчет LESS CSS Fancyness?

1 Ответ

0 голосов
/ 07 декабря 2011

Я согласен с @ToddBFisher в комментарии, и на данный момент для меня это скорее проблема юзабилити.Учтите, что люди также могут изменять размеры шрифтов в своих браузерах ... в этом случае было бы лучше использовать ems.Но браузеры также по-разному отображают шрифт, поэтому то, что в Mac выглядит потрясающе, будет выглядеть пиксельным на ПК.Если вы хотите, чтобы что-то выглядело идеально, используйте изображения.

Проверьте этот другой вопрос для получения дополнительной информации о высоте строки: Как добиться правильной согласованности высоты строки CSS

Или этот: Высота строки CSSРуководство

Вы также можете проверить удобство использования для обсуждения этих вещей: https://ux.stackexchange.com/ Там есть довольно удивительные посты.

...