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

StackOverflow https://stackoverflow.com/questions/213128

  •  03-07-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

В статье об отдельном списке (ноябрь 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]-->

Другие советы

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

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

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

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

для нетерпеливых, вот cric reset Эрика Мейера и 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;}

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top