Вопрос по размерам шрифтов на макете и в верстке

@Red Planet · Регистрация: 20.09.2009

Студворк — интернет-сервис помощи студентам

Здравствуйте. Верстаю макет. Есть неясность с размером шрифта. В body указываю размер 11pt, текст "Fusce nec eros augue, ut hendrerit erat. Nam dapibus sed semper blandit. Fusce cursus neque suscipit semper", что находится по центру шапки, в макете 13pt.

Перевожу одни единицы в другие.
13pt/11pt=1.181818...em.

Однако, если прописать следующий код, размер становится слишком большим, совсем не как на макете.
То же самое касается и заголовка "Aliquam Etiam Tempus" (16pt на макете).
16pt/11pt=1.45em.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 11pt;
}
 
p#header-text {
 font-size: 1.18em;
}
 
h1 {
 font-size: 1.45em;
 color: #fff;
 padding: 25px 0 13px 34px;
}

HTML5
1
2
<h1>Aliquam Etiam Tempus</h1>
<p id="header-text">Fusce nec eros augue, ut hendrerit erat. Nam dapibus sed semper blandit. Fusce cursus neque suscipit semper.</p>

Где моя ошибка и что нужно сделать, чтобы правильно соотнести размеры на макете и в верстке?

Макет и результат вложены.

Vovan-VE · 18.09.2010, 17:29

Так ведь относительности (em, % ) вычисляются от родителя. У этих <p> и <h1> родитель <body> ?
Вы используете reset.css?

CSS
1
2
3
4
5
6
7
8
9
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body{line-height:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
table,td{vertical-align:top;}
th{vertical-align:middle;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a img{border:none;}

@Red Planet · 18.09.2010, 19:18 **[ТС]**

Vovan-VE, спасибо. Я впервые от вас слышу о reset.css, надо будет разобраться.
Еще вопрос. Эквивалентны ли следующие коды?

CSS
1
2
3
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;
padding:0;
}

CSS
1
2
3
4
* {
margin:0;
padding:0;
}

Зачем писать такую длинную строку вместо звездочки? Или они значат разное?

@Hagrael · 18.09.2010, 19:40

Red Planet, ну если то, что выше - это все HTML-тэги, то да, эквивалентны.

Vovan-VE · 18.09.2010, 19:47

Сообщение от Red Planet

Эквивалентны ли следующие коды?

Нет. В первом перечислены N конкретных элементов, обнуление которых является разумным, и среди них специально нет элементов форм (input, select, option, ...), чтобы у них ненароком все не сбросилось. А вот * соответствует всем элементам, что не очень разумно.

@Red Planet · 22.09.2010, 20:27 **[ТС]**

Сообщение от Vovan-VE

Так ведь относительности (em, % ) вычисляются от родителя.

Можно с этого места подробнее?
Сейчас занялся данным вопросом, написал код.

CSS
1
2
3
4
5
6
7
8
9
10
11
body {
 font-size: 14px;
}
 
#somebox {
 font-size: 1.5em;
}
 
#inside-box {
 font-size: 2em;
}

HTML5
1
2
3
4
5
6
7
8
9
<body>
 <div id="somebox">
   Пример текста 1.5em.
 
   <div id="inside-box">
    Пример текста 2em.
   </div>
 </div>
</body>

Размер в блоке inside-box, насколько я понял, вычисляется не относительно размера в body, а относительно непосредственного родителя (в данном случае блока somebox).

Таким образом размер шрифта в блоке inside-box будет вычисляться так:
14px*1.5=21px - размер в somebox.
21px*2=42px - размер в inside-box.

Верно?

Vovan-VE · 23.09.2010, 15:06

Сообщение от Red Planet

Верно?

Да, именно так и должно быть.

@Red Planet · 26.09.2010, 21:07 **[ТС]**

Vovan-VE, спасибо. Честно сказать, данный факт удивил меня. И почему не сделали наследование от единого родителя body. Было бы удобнее.

Еще есть вопрос, он тоже по размерам шрифтов. Не помню где именно на форуме htmlbook.ru прочитал, что указывать размеры в px не очень-то правильно, потому как пользователи Макинтошей его не увидят (не уверен, что процитировал точно, но писали о проблеме именно с Макинтошами), говорилось, что нужно указывать размер в процентах. Правда ли это?

Vovan-VE · 27.09.2010, 16:56

Сообщение от Red Planet

писали о проблеме именно с Макинтошами

Red Planet, Пикселы в pt пересчитывает браузер. Если у браузера не хватает мозгов, значит его надо менять.

@Red Planet · 28.09.2010, 12:32 **[ТС]**

Vovan-VE, коль уж разговор зашел о браузерах, скажите свое мнение, стоит ли верстать так, чтобы все как положено отображалось в Internet Explorer 6 (и более ранних версиях) или же можно проверять верстку только на более новых? На чем вообще целесообразно проверять?

P.S. Нет ли у вас рабочей portable-версии седьмого IE? Находил, но ни одна на Windows 7 не работала.

@Hagrael · 28.09.2010, 14:21

Red Planet, под IE6 надо подстраивать, как бы то плохо не было

Vovan-VE · 28.09.2010, 15:40

Сообщение от Red Planet

стоит ли верстать так, чтобы все как положено отображалось в Internet Explorer 6 (и более ранних версиях)

В более ранних версия совершенно точно не стОит. А в IE6 зависит от аудитории, для которой предназначен сайт. Если, например, сайт предназначен для адекватной молодежи, то про IE6 можно смело забыть (в крайнем случае сделать заглушку с фразой "обновите браузер"). А если сайт предназначен для взрослых и пожилых людей, которые не знаю, чем ярлык от файла отличается, то тут уже решать Вам (у N-й части населения стоит самая ранняя WinXP со встроенным IE6). Догадайтесь, сколько % этих пользователей будут являться потенциальной аудиторией сайта.

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.09.2010, 19:40
	Red Planet, ну если то, что выше - это все HTML-тэги, то да, эквивалентны. 1

@Red Planet 49 / 10 / 3 Регистрация: 20.09.2009 Сообщений: 263
	26.09.2010, 21:07 [ТС]
	Vovan-VE, спасибо. Честно сказать, данный факт удивил меня. И почему не сделали наследование от единого родителя body. Было бы удобнее. Еще есть вопрос, он тоже по размерам шрифтов. Не помню где именно на форуме htmlbook.ru прочитал, что указывать размеры в px не очень-то правильно, потому как пользователи Макинтошей его не увидят (не уверен, что процитировал точно, но писали о проблеме именно с Макинтошами), говорилось, что нужно указывать размер в процентах. Правда ли это? 0

@Red Planet 49 / 10 / 3 Регистрация: 20.09.2009 Сообщений: 263
	28.09.2010, 12:32 [ТС]
	Vovan-VE, коль уж разговор зашел о браузерах, скажите свое мнение, стоит ли верстать так, чтобы все как положено отображалось в Internet Explorer 6 (и более ранних версиях) или же можно проверять верстку только на более новых? На чем вообще целесообразно проверять? P.S. Нет ли у вас рабочей portable-версии седьмого IE? Находил, но ни одна на Windows 7 не работала. 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	28.09.2010, 14:21
	Red Planet, под IE6 надо подстраивать, как бы то плохо не было 0