Размер шрифта.В чем я могу быть уверен? - PullRequest
14 голосов
/ 19 апреля 2011

Что на самом деле означает размер шрифта?
Давайте возьмем CSS.У меня есть font-size, где я могу указать число в pixels, points и т. Д.

Итак, что означает 12px?А что значит 20pt?Это максимальная ширина символа, минимальная, максимальная высота?
Знаю ли я наверняка, что 5 символов font-size: 10px будут иметь не более 50px, не меньше этого,или именно эта ширина?

Ответы [ 8 ]

18 голосов
/ 19 апреля 2011

Каждый шрифт имеет внутреннюю шкалу, относительно которой нарисованы глифы.Это произвольно и зависит от дизайнера шрифтов.Внутренняя высота буквы «M» может составлять 0,5, 1 или 700 внутренних единиц.

При размере 10 пикселей одна единица внутреннего шрифта = 10 пикселей.

В зависимости от дизайна шрифтаэто может отображать глифы любого размера без ограничений.

  • Q. Это максимальная ширина символа?
  • A. Нет
  • Q. это минимум?
  • A. Нет
  • Q. это максимальная высота?
  • A. Нет
  • Q. Буду ли я точно знать, что 5 символов размера шрифта: 10px будут иметь не более 50px?
  • A. Нет
  • Q. не меньше этого?
  • A. Нет
  • Q. точно эта ширина?
  • A. Нет
  • Q. Это высота х?
  • A. Нет
4 голосов
/ 21 февраля 2013

Как уже говорилось в других ответах, никаких гарантий нет, но нам часто требуется приблизительное практическое правило. Опытным путем: здесь три шрифта истинного типа, в 120px. Серые блоки соответствуют span, отображаемому в Chrome (отступ = 0), наложенные красные прямоугольники имеют высоту 120 пикселей.

enter image description here Мы видим, что (по крайней мере для этих шрифтов; помните: никаких гарантий) размер может быть ассимилирован до «номинальной высоты», которая охватывает потомков и потомков большинства (но не обязательно всех) общих символов.

4 голосов
/ 19 апреля 2011

Обычно размер шрифта определяется в пикселях = px или точках = pt

Примечание : 72 точки равны одному дюйму = 2,54 см

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

Так в чем же разница?

Легко понять разницу между единицами размера шрифта, когда вы видите их в действии. Обычно 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта давайте посмотрим, что произойдет, когда вы увеличите базовый размер шрифта (с помощью селектора CSS для тела) со 100% до 120%.

enter image description here

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

Источник : http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

3 голосов
/ 19 апреля 2011

Согласно рекомендации W3 pt обычно для печати, в то время как px для экрана.

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

Ознакомьтесь с этой статьей , чтобы узнать подробнее.

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

1 голос
/ 19 апреля 2011

Ну ... все уже объяснили, что означают единицы, поэтому остается только ответить, где и где измерять. Я думаю, будет от самой низкой до самой высокой точки всех символов в том шрифте, который вы используете. То есть от "высоты по возрастанию" до "высоты по убыванию" в этой статье: Wiki - Гарнитура

0 голосов
/ 25 июня 2012

Попробуйте, если это calc может быть полезным

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

  1. Все в пт. Для преобразования входных данных в сантиметрах в pt я использовал:

    double mesUnitCm = 1 / 2.54 * 72; // pt in 1 cm.
    
  2. Расчеты размера витрины отличаются от случая печати, так как они зависят от разрешения экрана, масштабирования рисунка на экране и т. Д. Затем вы получаете количество отображаемых точек, которые вписываются в то, что должно быть 1 см на печатной странице:

    double in1cm = a.pageFormat.getImageableHeight() / yourPatternSizeInCm;
    
  3. Масштаб отображаемого может быть рассчитан как:

    double scale = in1cm / mesUnitCm;
    
  4. Чтобы изменить масштаб шрифта, вы получите номер его размера (то есть в pt) и измените его размер с помощью масштабного коэффициента:

    ... (TextAttribute.FONT, Font.decode(myFontName + "-" + myFontStyle + "-" + (int) (myFontSize * scale))) ...
    
0 голосов
/ 19 апреля 2011

Это сильно зависит от шрифта, который вы используете.Возьмите шрифт SO по умолчанию, например: 10 'm шире, чем 10' i: mmmmmmmmmm iiiiiiiiii

Но, объявив его как «код», мы получим так называемый моноширинный шрифт, где оба имеют одинаковую ширину:

mmmmmmmmmm
iiiiiiiiii

И даже здесь отношение высоты к ширине зависит от шрифта.

Таким образом, ваш определенный ответ будет: Нет. Вы не можетескажи точно.

0 голосов
/ 19 апреля 2011

точка = точка (1 точка соответствует 1/72 дюйма)

px = пикселей (точка на экране компьютера)

...