Должен ли я использовать pt или px?

Question

В чем разница между pt и px в CSS?Какой я должен использовать и почему?

Answer 1

px ≠ Пикселей

Все эти ответы кажутся неверными. Вопреки интуиции, в CSS px не является пикселями . По крайней мере, не в простом физическом смысле.

Прочтите эту статью из W3C , EM, PX, PT, CM, IN… , о том, как px является «магическим» устройством, изобретенным для CSS. Значение px зависит от аппаратного обеспечения и разрешения. (Эта статья свежая, последнее обновление 2014-10 гг.)

Мой собственный взгляд на это: 1 px is the size of a thin line intended by a designer to be barely visible.

Цитировать эту статью :

Единица px - это магическая единица CSS. Он не связан с текущим шрифтом, а также не связан с абсолютными единицами. Единица px определена небольшой, но видимой, и поэтому горизонтальная линия шириной 1 пиксель может отображаться с острыми краями (без сглаживания). То, что является четким, маленьким и видимым, зависит от устройства и способа его использования: держите ли вы его близко к глазам, как мобильный телефон, на расстоянии вытянутой руки, как монитор компьютера или где-то посередине, как книгу? Таким образом, px определяется не как постоянная длина, а как нечто, зависящее от типа устройства и его типичного использования.

Чтобы получить представление о внешнем виде пикселя, представьте компьютерный монитор ЭЛТ 1990-х годов: наименьшая точка, на которой он может отображать, составляет около 1/100 дюйма (0,25 мм) или чуть больше. Устройство px получило свое название от этих пикселей экрана.

В настоящее время существуют устройства, которые в принципе могут отображать более мелкие острые точки (хотя для их просмотра может потребоваться лупа). Но документы прошлого века, которые использовали px в CSS, выглядят одинаково, независимо от устройства. Принтеры, в частности, могут отображать четкие линии с гораздо меньшими деталями, чем 1px, но даже на принтерах линия в 1px выглядит почти так же, как на мониторе компьютера. Устройства меняются, но px всегда имеет одинаковый внешний вид.

Эта статья дает некоторые рекомендации по использованию pt против px против em, чтобы ответить на этот вопрос.

Answer 2

Здесь у вас есть очень подробное объяснение их различий

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Суть его (из источника)

Пиксели являются единицами фиксированного размера, которые используются на экране носителя (т.е. для чтения на экране компьютера). Пиксель означает «элемент изображения», и, как вы знаете, один пиксель - это один маленький «квадрат» на вашем экране. Точки традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге и т. Д.). Одна точка равна 1/72 дюйма. Точки очень похожи на пиксели в том смысле, что они являются единицами фиксированного размера и не могут масштабироваться по размеру.

Answer 3

Посмотрите эту превосходную статью на CSS-хитрости:

• px - em -% - pt - ключевое слово

Взято изстатья:

pt

Последняя единица измерения, в которой можно объявить размеры шрифта, - это точечные значения (pt). Значения точек предназначены только для печати CSS! Точка - это единица измерения, используемая для реальной типографии чернилами на бумаге.72pt = один дюймОдин дюйм = один реальный дюйм, как на линейке.Ни дюйма на экране, что совершенно произвольно в зависимости от разрешения.

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

Для правильной оценки причина, по которой мы не используем размеры точек для отображения на экране (кроме того, что это абсурдно), заключается в том, что кросс-браузерные результаты существенно отличаются:

px

Если вам нужен детальный контроль, выбор размера шрифтов в пиксельных значениях (px) - отличный выбор (это мой любимый вариант).На экране компьютера он не становится более точным, чем один пиксель.Имея размеры шрифтов в пикселях, вы в буквальном смысле говорите браузерам, чтобы они отображали буквы точно в том же количестве пикселей по высоте:

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

Из-за особенностей значений пикселей они не каскадируются.Если родительский элемент имеет размер пикселя 18 пикселей, а дочерний - 16 пикселей, дочерний элемент будет 16 пикселей.Однако настройки размера шрифта можно использовать в комбинации.Например, если для родительского элемента установлено значение 16px, а для дочернего элемента - «больше», дочерний элемент действительно будет больше родительского.Быстрый тест показал мне это:

«Больше» увеличило 16 пикселей родителя до 20, что на 25% больше.

Пиксели получили плохиеоберните в прошлом для доступности и проблем юзабилити.В IE 6 и ниже размеры шрифта, заданные в пикселях , не могут быть изменены пользователем .Это означает, что мы, молодые, здоровые дизайнеры, можем установить шрифт размером 12px и читать его на экране очень хорошо, но когда люди чуть длиннее в зубе, увеличивают размер, чтобы они могли его прочитать, они не могут.Это вина IE 6, а не наша, но мы понимаем, что нам нужно, и мы должны с этим справиться.

Установка размера шрифта в пикселях является наиболее точным (и я считаю наиболее удовлетворительным) методом, но учитывает количество посетителей, все еще использующих IE 6 на вашем сайте, и их потребности в доступности.Мы находимся на грани того, чтобы больше не заботиться об этом.

Answer 4

Точка составляет 1/72 дюйма и является бесполезной мерой для всего, что отображается на устройстве, которое неправильно вычисляет DPI. Это делает его разумным выбором для печати и ужасным выбором для использования на экране.

px - это пиксель, который в большинстве случаев отображается на пиксель экрана.

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

Пиксель отлично подходит, если вам нужно подобрать размер, соответствующий изображению, или если вам нужна тонкая рамка.

Проценты отлично подходят для размеров шрифта, так как, если вы используете их последовательно, вы получаете размеры шрифта, пропорциональные предпочтениям пользователя.

Ems отлично подходят, если вы хотите, чтобы размер элемента соответствовал размеру шрифта (поэтому абзац может стать шире, если размер шрифта больше)

… и т. Д.

Answer 5

pt является производным (сокращением) «точки», которая исторически использовалась на гранях печатного типа, где размер обычно «измерялся» в «точках», где 1 точка имеет приблизительное измерение 1/72 дюйма, итаким образом, 72-точечный шрифт будет иметь размер 1 дюйм.

px - это сокращение от «pixel», которое представляет собой простую «точку» на экране, или на матричном принтере, или на другом принтере или устройстве, которое отображает вточечная мода - в отличие от старых пишущих машинок, которые имели фиксированный размер, сплошной ударник, который оставлял отпечаток символа, нажимая на ленту, таким образом оставляя изображение фиксированного размера.

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

Были разные коробки (падежи) для разных типографические шрифты и размеры, но все еще и «верхний» и «нижний» регистр для каждого из них.

Другим термином является «pica», который является мерой одного символа в шрифте, таким образом, pica равен 1/ 6 дюйма или 12 точечных единиц измерения (12/72) измерения.

Строго говоря, измерение выполняется на компьютерах диаметром 4,233 мм или 0,166 дюйма, в то время как старая точка (американская) составляет 1 / 72,27 отдюйм и французский составляет 4,512 мм (0,177 дюйма).Таким образом, мое утверждение «приблизительное» в отношении измерений.

Далее, пишущие машинки, используемые в офисах, имели либо «Elite», либо «Pica» размер, где размер составлял 10 и 12 символов на дюйм соответственно.

Кроме того, «точка», до стандартизации, основывалась на размере «фута» металлических типографов, размере основного отпечатка одного символа и несколько различалась по размеру.

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

Что касается использования CSS, я предпочитаю использовать EM, а не px или pt, таким образом получая преимущество масштабирования без потери относительного местоположения и размера.

РЕДАКТИРОВАТЬ: просто для полноты вы можете думать о EM (em) как элемент меры высоты одного шрифта, поэтому 1em для шрифта 12pt будет высота этого шрифта и 2em будет вдвое больше высоты.Обратите внимание, что для шрифта 12px 2em составляет 24 пикселя.SO 10px обычно равен 0,63em стандартного шрифта, так как «большинство» браузеров основаны на 16px = 1em в качестве стандартного размера шрифта.