Что именно представляет px в размере веб-шрифта

#html #css

#HTML #css

Вопрос:

Я делаю некоторую графику (на Javascript, если это уместно), и я знаю, что вы можете изменять размер шрифтов с помощью pt , px , % и т.д. При поиске того, что px означает, кажется, что каждый сайт дает один и тот же расплывчатый ответ — размер шрифта в пикселях. Мне интересно, что точно px представляет. Например, если у меня есть 20px , будут ли 20 пикселей представлять высоту заглавной A , маленькой e буквы, строчной g буквы или разницу между нижней частью g и верхней частью A ? (Я предполагаю, что это размер A , но я просто хочу перепроверить).

Кроме того, px , по-видимому, зависит от размера представления. Итак, если я сделаю a fillRect(1,1,20,20) , будет ли это размер заглавной буквы A в 20 пикселей, или размер шрифта меняется на разных устройствах независимо от графики?

Ответ №1:

Например, если у меня 20 пикселей, будут ли 20 пикселей представлять высоту заглавной буквы A, маленькой буквы e, строчной буквы g или разницу между нижней частью буквы g и верхней частью буквы A?

Ни один из них. Он представляет абстрактный объект, называемый «em-square». Высота заглавных букв, ширина символов и различные другие параметры символов затем определяются в каждом шрифте как пропорциональные em-квадрату. Но часто ни одна из мер, которые вы видите, в точности не равна размеру 1 em-квадрат, или, в вашем случае, равна 20px.

Комментарии:

1. Итак, если бы я хотел оценить высоту, скажем, заголовка A в Arial, как бы я это сделал? (или, более кратко, если бы я хотел нарисовать заглавную букву A высотой 20 пикселей …)

2. Вы должны посмотреть на показатели шрифта. Шрифты TrueType, например, можно проверить в TypeLight 3.2. Показатели шрифта дают размер в единицах для каждого квадрата (обычно 2048 или 1000) и высоту заглавных букв в тех же единицах (например, 1466), поэтому для высоты заглавных букв в 20 пикселей вы должны установить размер шрифта равным (20px * 2048/1466)

Ответ №2:

за http://www.unitconversion.org/typography/pixels-x-to-centimeters-conversion.html

10 пикселей равны 0,264583333 см.

в остальном это может сильно зависеть от вашего шрифта и разрешения экрана.

Комментарии:

1. Хм … возможно, я не был ясен в своем вопросе… Я только что попытался нарисовать заглавную букву A в моей программе javascript (ctx.fillText («A», 100, 100), и я сделал ctx.fillRect (120,100,20,20), и они разной высоты — высота буквы A не совсем равна 20 пикселям — так что же означает 20 в 20 пикселях???

Ответ №3:

Нет, размер одного пикселя px официально не определен техническим способом.

Хотя я не могу сказать вам, кто именно определяет значение, является ли это производителем ПК или кто это такой и предписывают ли рекомендации w3 этим определяющим сторонам измерять его с определенного расстояния в зависимости от размера экрана, Но наиболее конкретное и полезное описание «волшебной» px единицы является

1 px равен наименьшей ширине, чтобы сделать строку видимой на конкретном устройстве.

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

(смотрите Официальную информацию w3 о px-единице).

Комментарии:

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