Как указать размеры шрифта в CSS, чтобы они соответствовали макетам и позволяли изменять размер?
Мы сталкиваемся с проблемами, связанными с указанием размеров шрифтов. Если мы укажем размеры шрифта с помощью pt, они не всегда будут выглядеть одинаково в разных браузерах / платформах. Если мы укажем размеры шрифта с помощью px, пользователи IE6 не смогут изменить размер текста.
Ответы 5
Вы всегда должны использовать относительные единицы для размеров шрифта, например em.
http://developer.yahoo.com/yui/fonts/#fontsize (редактировать: я считаю, что это предполагает их базовый CSS, но он предполагает базовый размер 13 пикселей; я считаю, что даже IE правильно изменяет размер текста процентного размера, где проценты измеряются по размеру пикселей.)
Тем не менее, вы никогда не получите идеального размера шрифта, особенно, если вы пытаетесь сопоставить графический макет, но даже просто браузер для браузера, все будет по-другому в рендеринге текста.
Статья о A List Apart (ноябрь 2007 г.) подробно изучил это в различных браузерах и пришел к выводу:
Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.
Они предоставили снимки экрана информацию о том, как этот метод выглядит в большинстве популярных браузеров. Вот код, который они использовали:
<style type = "text/css">`
body {
font-size:100%;
line-height:1.125em;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>-->
<style type = "text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
У вас всегда будут проблемы с сопоставлением мокапов, если вы не используете px.
http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
Я не думаю, что есть что-то особенно плохое в использовании px для ваших веб-страниц. Тем более, что почти все современные браузеры - за исключением webkit - по умолчанию используют масштабирование, а не изменение размера текста.
Я все еще могу придерживаться того, что предлагает Натан, поскольку это дает вам больше гибкости в дизайне, поскольку вы можете быстро масштабировать размеры шрифта всего сайта, изменив только один из них. Но если вы ленивы или хотите, чтобы все было идеально, то вам не нужно бояться px.
вопреки тому, что ответили другие, вы никогда не должны использовать пиксели для размеров шрифта. Internet Explorer 6 по-прежнему занимает большую часть рынка браузеров, и он абсолютно не будет изменять размер текста, который указан с размером пикселя (как упоминалось в вопросе). вы всегда должны стремиться использовать «em».
Я использую технику, аналогичную той, что предлагали здесь другие, посредством которой я «сбрасываю» стили CSS по всем направлениям, чтобы устранить любые несоответствия браузера с размером и расположением шрифта. мне нравятся стили перезагрузка эрика майера перезагрузка в качестве основы. вы также можете использовать метод yahoo сбросить css, если хотите покопаться во всей этой библиотеке.
Далее я использую Шаблон типографики с разумным CSS Оуэна Бриггса. вы можете заметить, что он не обновлялся с 2003 года, но по-прежнему полностью совместим с современными браузерами.
Как только вы получите эту базу, вам достаточно просто изменить процент шрифтов в теге <body>, что позволит легко масштабировать все шрифты на вашем веб-сайте таким же образом.
для нетерпеливых, вот CSS-код сброса Эрика Мейера и CSS-типографика Оуэна Бриггса, смешанные вместе (проанализированы с помощью этот отличный форматтер css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
body{line-height:1;font-family:verdana, arial, helvetica, sans-serif;font-size:76%;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a{text-decoration:none;font-weight:700;color:#000;}
a:hover{text-decoration:underline;}
h1{font-size:2em;font-weight:400;margin-top:0;margin-bottom:0;}
h2{font-size:1.7em;font-weight:400;margin:1.2em 0;}
h3{font-size:1.4em;font-weight:400;margin:1.2em 0;}
h4{font-size:1.2em;font-weight:700;margin:1.2em 0;}
h5{font-size:1em;font-weight:700;margin:1.2em 0;}
h6{font-size:.8em;font-weight:700;margin:1.2em 0;}
img{border:0;}
ol,ul,li{font-size:1em;line-height:1.8em;margin-top:.2em;margin-bottom:.1em;}
p{font-size:1em;line-height:1.8em;margin:1.2em 0;}
li > p{margin-top:.2em;}
pre{font-family:monospace;font-size:1em;}
strong,b{font-weight:700;}
Значения свойства line-height не требуют указания единицы измерения. Высота строки уже связана с размером шрифта, поэтому безразмерная высота строки такая же, как указанная в ems. Итак, 'line-height: 1.125em;' то же самое, что и "высота строки: 1,125;"