Как указать размеры шрифта в CSS, чтобы они соответствовали макетам и позволяли изменять размеры? - PullRequest
Новая
       10

Как указать размеры шрифта в CSS, чтобы они соответствовали макетам и позволяли изменять размеры?

2 голосов
/ 17 октября 2008

У нас возникают проблемы с тем, как мы определяем размеры шрифта. Если мы указываем размеры шрифта с помощью pt, они не всегда выглядят одинаково для разных браузеров / платформ. Если мы укажем размеры шрифта с помощью px, пользователи IE6 не смогут изменить размер текста.

Ответы [ 5 ]

2 голосов
/ 18 октября 2008

вопреки ответам других, вы никогда не должны использовать пиксели для размеров шрифта. Internet Explorer 6 по-прежнему имеет большой кусок пирога на рынке браузеров, и он абсолютно не будет изменять размер текста, который указан с размером пикселя (как упоминалось в вопросе). Вы всегда должны стремиться использовать «их».

Я использую технику, аналогичную предложенной здесь, в соответствии с которой я «сбрасываю» стили CSS по всем направлениям, чтобы устранить любые несоответствия браузера с размерами шрифтов и позиционированием. Мне нравится Эрик Мейер перезагрузил стили в качестве базы. Вы также можете использовать метод yahoo reset css , если хотите изучить всю эту библиотеку.

далее, я использую шаблон типографии sewen css Оуэна Бриггса . вы можете заметить, что он не обновлялся с 2003 года, но все еще абсолютно надежен в современных браузерах.

Как только вы получите эту базу, достаточно просто изменить процент шрифта для тега <body>, который будет легко масштабировать все шрифты на вашем сайте одинаковым образом.

для нетерпеливых, вот сброс cric Эрика Мейера и 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;}
2 голосов
/ 17 октября 2008

Статья в A List Apart (ноябрь 2007 г.) подробно рассмотрела это в различных браузерах и пришла к выводу:

Было показано, что размер текста и высота строки в ems с указанием процента в теле (и необязательного предостережения для Safari 2) обеспечивают точный текст с изменяемым размером во всех браузерах, широко используемых сегодня. Это техника, которую вы можете положить в свой набор и использовать в качестве наилучшей практики для определения размера текста в CSS, которая устраивает как дизайнеров, так и читателей.

Они предоставили снимков экрана того, как эта техника выглядит в большинстве популярных браузеров. Вот код, который они использовали: 

<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]-->
1 голос
/ 18 октября 2008

У вас всегда будут проблемы с подбором макетов, если вы не используете px. http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
Я не чувствую, что есть что-то не так с использованием px для ваших веб-страниц. Тем более, что почти все современные браузеры - за исключением веб-набора - используют масштабирование, а не изменение размера текста по умолчанию.

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

1 голос
/ 17 октября 2008

http://developer.yahoo.com/yui/fonts/#fontsize (редактировать: я полагаю, что это предполагает их базовый CSS, но он предполагает базовый размер 13px; я полагаю, что даже IE правильно изменяет размер текста в процентах, где проценты измеряются относительно размера px. )

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

1 голос
/ 17 октября 2008

Вы всегда должны использовать относительные единицы для размеров шрифта, такие как em.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...