Размер шрифта CSS:относительный противабсолютные значения.Что использовать?[закрыто]
https://stackoverflow.com/questions/520939
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
- Каков наилучший способ изменить размер текста в разных браузерах?
- Каковы преимущества и недостатки определения размера шрифта в пикселях / em?
Решение
Что использовать?
И то, и другое.Относительно основного текста, который пользователям придется много читать (поэтому они захотят иметь возможность читать его с комфортом);Абсолютный для текста, размер которого должен соответствовать другим элементам страницы, имеющим размер в пикселях, таким как изображения.
Для относительных ‘%’ и ‘em’ одинаково хороши.
Для абсолютного значения всегда используйте ‘px’.Никогда не используйте ‘pt’ для использования на экране, это целесообразно только для таблиц стилей печати.Жаль, что ‘pt’ считается единицей по умолчанию для обработки шрифтов, потому что в Интернете это наихудший из возможных вариантов.
(ETA:Обратите внимание, что начиная с этого ответа, CSS3 имеет переопределенный ‘физические единицы’, так что px и pt всегда пропорциональны.Так что эта проблема больше не имеет значения, если только вас не беспокоят очень старые браузеры.)
Некоторым людям не нравится эффект ‘усугубления’ относительных размеров шрифта.Хитрость, на самом деле, заключается в том, чтобы использовать как можно меньше изменений размера шрифта, чтобы избежать слишком большого количества вложений.IT следует можно было бы получить поведение относительно предпочитаемого пользователем размера без усложнения, используя ключевые слова размера шрифта ‘small’ / ‘medium’ / ‘xx-large’ / и т.д., Но, к сожалению, таким образом вы не получаете большой детализации, и даже сегодня существуют различия в том, как браузеры обрабатывают их.
Другие советы
Я сохраняю размер шрифта как выбранный пользователем по умолчанию, затем использую относительный размер:
body {
font-size: 100%;
}
p {
font-size: 1em;
}
h1 {
font-size: 1.8em;
}
Этот метод учитывает выбор пользователем размера шрифта в своем браузере, который обычно устанавливается равным 16 пикселям.
Лично я установил абсолютный размер шрифта на body и оттуда установите все относительно этого.например:
body {
font-size: 10px; /* or pt if you want */
}
h1 {
font-size: 200%;
}
Просто старайтесь избегать комбинирования составных относительных размеров:
body {
font-size: 10px;
}
p {
font-size: 80%; /* 8px, right? */
}
div {
font-size: 150%;
}
/* what size is a "div > p" ? */
В наши дни все современные браузеры имеют масштабирование на всю страницу, что означает, что даже изменение размера шрифта в пикселях допустимо.
Преимущество этого метода заключается в том, что вы можете легко увеличить или уменьшить размер всего вашего текста, изменив одно определение.
Недостатком является то, что если вы хотите изменить размер шрифта по умолчанию, но не заголовки (например), то потребуется изменить множество объявлений.
Список Отдельно сделал обширная статья о том, как работают размеры шрифтов в различных браузерах.Это оказывается сложнее, чем вы ожидали, как и все остальное в CSS.Консенсус, похоже, склоняется в пользу использования ems, поскольку это дает пользователю больше контроля над настройкой размера шрифта в браузере.
Я предпочитаю относительные значения, поскольку Internet Explorer (< 7?) невозможно масштабировать абсолютные значения или значения в пикселях.
Одна вещь, которую я видел, как люди используют, - это определить базовый размер шрифта в основном CSS (например, 12pt), а затем все остальные размеры шрифта в процентах от этого (например, 140% для заголовков, 80% для маленьких и т.д.).
Если вы используете pt, то у вас будут различия в отображении в зависимости от установленного пользователем DPI, но, возможно, это будет под контролем пользователя.
Если вы используете px, то у вас возникнут проблемы на устройствах с очень высоким разрешением DPI.
Em и pt хороши для CSS для печати.
Многие делают это и смотрят, что происходит со шрифтами и CSS.
Если вы используете абсолютные размеры, то слабовидящим читателям может быть трудно читать.Если вы используете относительные размеры, то вы просто указываете, какой текст больше / меньше другого текста на вашей странице, и все это относительно размера текста пользователя по умолчанию, который может быть большим (если он поврежден) или крошечным (если он немного странный).
Недостатком текста относительного размера является то, что вы хотите, чтобы ваш сайт имел фиксированные размеры, но, если возможно, вам все равно следует выбрать более гибкий дизайн, чтобы размер страницы соответствовал ее содержимому.
Пиксели имеют фиксированный размер.Это означает, что при просмотре на любом экране и разрешении текст будет всегда быть того же размера.
Они масштабируемы, что означает, что пользователи с экранами разных размеров и разрешений, как правило, могут получать лучший опыт.
В некоторых браузерах возникают проблемы с изменением размера шрифтов фиксированного размера (px и pt), и поэтому они, как правило, не очень хороши для веб-шрифта, поскольку некоторым пользователям может потребоваться увеличить размер вашего шрифта с помощью экранной лупы или просто колесика мыши.
Относительные размеры шрифтов имеют обыкновение раздражать невежественных дизайнеров, которых раздражает, что веб-сайт не соответствует именно так к их замыслам.
На мой взгляд, успокаивать дизайнеров, которым следовало бы знать лучше, - недостаточная причина для того, чтобы когда-либо использовать фиксированные шрифты в веб-разработке.
Использование масштабирования EM более универсально при работе со шрифтами.Это также более доступно.
Если вы не работали с этим раньше, такой инструмент, как Em Калькулятор может быть очень полезно для понимания того, как работает тег / модель.
Использование относительных размеров улучшит внешний вид вашей страницы на мобильных устройствах, таких как iPhone, тем более что они отображают страницу в большем окне просмотра, а затем уменьшают ее размер, чтобы она поместилась в необходимом пространстве.
Если вы можете отказаться от поддержки IE8, то я предлагаю использовать rem единицы измерения.Это относительные единицы, подобные em, но они не переходят каскадом к дочерним элементам, что значительно упрощает работу с ними
em являются сложными
p {
font-size: 2.5em;
span {
font-size: 1.5 em;
/* font size comes out to 3.75 root em*/
}
}
rem являются более простыми
p {
font-size: 2.5rem;
span {
font-size: 1.5 rem;
/* font size comes out to 1.5 root em*/
}
}
Большая часть моего опыта программирования связана с настольными приложениями, но в последнее время я довольно много читал о веб-разработке, и в книгах, с которыми я сталкивался, предлагается использовать спецификацию размера шрифта ключевого слова (small, medium и т.д.), А затем увеличивать или уменьшать его на процент или em.
Если размер вашего шрифта указан в px, пользователи старых версий IE не смогут переопределить размер текста, то есть они не смогут сделать его больше или меньше в соответствии со своими предпочтениями.
Однако IE5 также создает проблему, когда размер вашего шрифта задается ключевым словом:по сравнению с другими браузерами, IE5 отображает текст примерно на один шаг больше.
