2013-02-27 3 views
4

Вот размеры заголовков от bootstrap.css:Обоснование за размера шрифта в начальной загрузки

h1 { 
    font-size: 38.5px; 
} 

h2 { 
    font-size: 31.5px; 
} 

h3 { 
    font-size: 24.5px; 
} 

Я был удивлен тем фактом, что эти размеры являются дробными (полуцелыми), что наводит на мысль, что их точность, по крайней мере 0.25px (менее 1%).

Как веб-дизайнеры приходят на такие размеры? Получены ли они каким-то научным процессом, возможно, какой-то расчет? Или люди просто смотрят на свой сайт, играя с размерами, пока не почувствует себя хорошо? Как дизайнер может убедить своего товарища по команде, что это действительно должно быть 31.5px, а не только 31px?

+0

Мне также было интересно, когда я говорю эти единицы, я был, как хорошо! как на экране будет отображаться половина пикселя? если это возможно, то они имеют два пиксела вправо? определенно не две половины пикселей. –

+0

Смотрите это сообщение http://stackoverflow.com/questions/10093688/css-font-size-5-increments. – stephenfjohnson

+0

@SathishManohar: на самом деле это меня не удивило. Могут быть разные размеры, которые пропорциональны размеру базового шрифта, и там вы можете наблюдать разницу. Но я действительно не понимаю, как они придумали эти ценности. –

ответ

10

Они точно не определен размером шрифта 31.5px, вместо этого они указаны базового размера шрифта и коэффициенты для заголовков см code:

// file: variables.less 
@baseFontSize:   14px; 

// file: type.less 
h1 { font-size: @baseFontSize * 2.75; } // ~38px 
h2 { font-size: @baseFontSize * 2.25; } // ~32px 
h3 { font-size: @baseFontSize * 1.75; } // ~24px 
h4 { font-size: @baseFontSize * 1.25; } // ~18px 
h5 { font-size: @baseFontSize; } 
h6 { font-size: @baseFontSize * 0.85; } // ~12px 

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

+1

Ах. Я забыл, что генерируется код CSS. Но почему они не использовали относительные размеры шрифтов в CSS? (Например, 'font-size: 275%;', если я не ошибаюсь в синтаксисе.) –

+1

Если вы укажете 'font-size: 275%;' это означает 2,75 размера шрифта в родительском элементе, t знать, что является родительским элементом или каков его размер шрифта. Bootstrap использует другой подход, когда размер шрифта связан с базовым размером шрифта, но тем не менее фиксирован и не зависит от размера шрифта родительского элемента. –

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