Размер шрифта CSS: относительные или абсолютные значения. Что использовать?

  • Каков наилучший способ разметки текста в браузерах?
  • В чем преимущества и недостатки определения размера шрифта в пикселях /em?

ОТВЕТЫ

Ответ 1

Что использовать?

И. Относительно основного текста основного текста, который пользователи должны будут прочитать много (чтобы они хотели иметь возможность читать его удобно); Абсолют для текста, который должен иметь размер, чтобы соответствовать другим элементам на странице, размер которых в пикселях, например изображения.

Для относительных, '% и' em одинаково хороши.

Для абсолютного всегда используйте 'px. Никогда не используйте 'pt для использования на экране, это только разумно для стилей печати. Жаль, что "pt считается единицей по умолчанию для обработки шрифтов, потому что в Интернете это самый худший выбор.

(ETA: Обратите внимание, что после этого ответа CSS3 переопределил физические единицы, так что px и pt всегда пропорциональны. Поэтому эта проблема больше не имеет значения, если вы не обеспокоены очень старыми браузерами.)

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

Ответ 2

Я сохраняю размер шрифта в качестве пользователя, выбранного по умолчанию, а затем используйте относительный размер:

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

Этот метод учитывает пользовательский размер шрифта в своем браузере, который обычно устанавливается на 16 пикселей.

Ответ 3

Лично я установил абсолютный размер шрифта на 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" ? */

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

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

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

Ответ 4

A List Apart сделал обширную запись о том, как размеры шрифтов работают в разных браузерах. Это оказывается более сложным, чем вы ожидали, как и все остальное в CSS. Консенсус, похоже, склонен к использованию ems, поскольку это дает пользователю больше контроля над настройкой размера шрифта в браузере.

Ответ 5

Я предпочитаю относительные значения, так как Internet Explorer (< 7?) не может масштабировать абсолютные или пиксельные значения.

Ответ 6

Одна вещь, которую я видел, это использование базового размера шрифта в теле CSS (например, 12pt), а затем все остальные размеры шрифта - это проценты (например, 140% для заголовков, 80% для небольших, и т.д.).

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

Если вы используете px, тогда у вас будут проблемы с очень высокими устройствами DPI.

Em и pt хороши для CSS для печати. ​​

Там много этого делать и посмотреть, что происходит с шрифтами и CSS.

Ответ 7

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

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

Ответ 8

Пиксели фиксированного размера. Это означает, что при просмотре на любом экране и разрешении текст всегда будет одного размера.

Em масштабируемы, что означает, что люди с разными размерами экрана и разрешением обычно могут получить лучший опыт.

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

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

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

Ответ 9

Использование масштабирования EM более универсально с шрифтами. Это также более доступно.

Если вы еще не работали с этим, инструмент, подобный Em Calculator, может быть очень полезен для понимания того, как работает тег/модель.

Ответ 10

Использование относительных размеров сделает вашу страницу лучше на мобильных устройствах, таких как iPhone, тем более, что они отображают страницу в более крупном окне просмотра, а затем масштабируют ее, чтобы она соответствовала требуемому пространству.

Ответ 11

Если вы можете отказаться от поддержки 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*/
  }
}

Ответ 12

Большая часть моего фона программирования - это настольные приложения, но в последнее время я читаю довольно много информации о веб-разработке, а книги, которые я нашел, предлагают использовать спецификацию размера шрифта по ключевым словам (малая, средняя и т.д.), а затем масштабирование что вверх или вниз в процентах или em.

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

Однако IE5 также создает проблему, когда размер шрифта указан по ключевому слову: по сравнению с другими браузерами, IE5 отображает текст на один шаг больше.