Есть ли какие-то практические причины использовать «em» вместо единиц размера шрифта «pt»?
Я усвоил одно правило CSS: вы должны использовать относительную единицу размера шрифта «em» вместо абсолютного «pt». Общая идея состоит в том, чтобы установить размер шрифта в теге body, например, «94%», а затем установите для всех остальных элементов размер «em», подобный этому. Аргументация такова:
- затем вы можете изменить относительный размер всех размеров шрифта на вашем сайте, изменив размер шрифта тела в одной точке
- сами пользователи могут изменять размер шрифтов, так как они определены в "em"
Однако при использовании «em» вместо «pt» я постоянно сталкиваюсь с проблемами, такими как следующее: элемент с размером шрифта встраивается в другой элемент с размером шрифта и, таким образом, становится крошечным (в приведенном ниже случае одно словарное слово 0,8 из 0,8, а другой - 0,8 из 1,2).
<html>
<head>
<style type = "text/css">
body {
font-size: 94%;
}
p {
font-size: .8em;
}
li {
font-size: 1.2em;
}
.vocabulary {
font-size: .8em;
}
</style>
</head>
<body>
<p>This is an <span class = "vocabulary">egregious</span> test.</p>
<ul>
<li>This is in a <span class = "vocabulary">superb</span> list.</li>
</ul>
</body>
</html>
Конечно, на очень простых, понятных HTML-сайтах это не проблема, но в реальном мире с импортированными таблицами стилей, которые, возможно, вы даже не создавали, и с динамическими сайтами, где элементы управления встроены в другие элементы управления, все они выводят HTML с, возможно, встроенный стиль, я считаю, что веб-сайты с размером шрифта в единицах «em» иногда невозможно поддерживать, и способ получить контроль над размером шрифта - просто преобразовать все в жесткие размеры «px».
Кроме того, я только что проверил четыре основных браузера, и в каждом из них есть горячие клавиши, которые увеличивают и уменьшают размер шрифтов в стиле «pt».
Итак, вот мои вопросы:
- есть ли реальная причина, по которой я должен использовать «em» вместо «pt»?
- есть ли уловка в использовании размеров "em", чтобы я не столкнулся с проблемой встроенного размера шрифта, описанной выше?
Ответы 7
px: зависит от разрешения экрана и других зависимых проблем.
em: независимо от разрешения экрана, оно будет одинаковым для всех
Я имел ввиду «pt», а не «px», конечно, извините. Отредактировал исходный пост. :-)
Даже если вы жестко запрограммируете размер шрифта в пикселях, вы все равно можете использовать em для единицы измерения, чтобы указать поля, длину и т. д., Аналогично использованию em quad для отступа абзаца в печатной машине в любом случае.
Редактировать (после того, как плакат изменился с px на pt): если вы хотите быть «идеальным по пикселям», безопаснее использовать px, а не pt, так как в разных операционных системах разные настройки dpi, и пользовательское изменение меняет dpi резко, особенно в Linux. . Точка PostScript определяется как 1/72 дюйма. «Дюйм» на экране может составлять от 72 пикселей до того, что плавает ваша лодка.
По моему опыту как веб-пользователь, которому нравится крупный текст:
Указать «pt» для размеров шрифта можно, если вы не укажете размеры элементов в пикселях / pt. Потому что, когда вы это делаете, а я увеличиваю размер текста, половина текста выходит за пределы элемента, и слишком часто переполнение скрыто.
Это не должно искажать ваш макет - просто оставьте место, чтобы все росло вниз. Я лучше справляюсь с прокруткой страницы, чем не вижу текста.
В зависимости от страны, в которой вы живете, вы можете фактически нарушить закон, используя pt вместо em, в зависимости от того, насколько жестко ваш законодательный орган хочет обеспечить соблюдение правил. Здесь, в Великобритании, действует закон о дискриминации в отношении людей с ограниченными возможностями, который использовался для нацеливания на компании, чьи веб-сайты отображались с фиксированным шрифтом. Это рассматривается как дискриминация, потому что это ставит в невыгодное положение частично размещенных, которые, возможно, увеличили размер шрифта своего браузера, чтобы компенсировать это, - но ваш сайт по-прежнему отображает шрифты с установленным вами размером, а не с размером, который они ожидали бы.
Да, сложнее разобраться с относительными размерами шрифтов и плавным макетом, но если вы хотите соблюдать законодательство, вам нужно найти время, чтобы разобраться с этим.
Для работы местных органов власти в Великобритании были установлены целевые показатели, гарантирующие, что веб-сайты следуют рекомендациям Double A, одно из которых гласит: «Используйте относительные, а не абсолютные единицы в значениях атрибутов языка разметки и значениях свойств таблиц стилей». См. здесь.
Привет, Пит, спасибо за ответ. Знаете ли вы, применяется ли этот закон к компаниям, зарегистрированным в США, у которых есть клиенты, использующие свои USE в Великобритании?
1) IE6 все еще широко используется и не может изменять размер шрифтов, определенных в пикселях. => Проблемы с удобством использования. Одно это - нет-нет.
2) См., Например, Единицы CSS.
3) Большинство авторов соглашаются сказать, что pt - это в основном единица печати: в худшем случае используйте их в таблицах стилей печати, где проблема изменения размера исчезает ...
Некоторые профессиональные разработчики CSS, которых я знаю, используют «px» для определения размеров шрифта в своей основной таблице стилей для современных браузеров, а затем имеют отдельную таблицу стилей для IE6, в которой они указываются в относительных единицах. Таким образом они достигают удобства использования и позволяют увеличивать шрифт во всех браузерах, но без ущерба для дизайна в современных браузерах.
(На самом деле они идут дальше этого: их таблица стилей IE6 отключает большую часть форматирования блоков и просто выкладывает все, используя общий мобильный вид. Таким образом, пользователи IE6 могут видеть простой макет, а все остальные получают профессиональный вид, где на самом деле блоки плавать правильно.)
Я имел ввиду «pt», а не «px», конечно, извините. Отредактировал исходный пост. :-)