В эпоху сотен дисплеев веб-дизайнерам часто приходится учитывать опыт просмотра страниц различными клиентами.
Размер текста — важная часть пользовательского опыта. Различные разрешения, разные размеры мониторов, разные значения DPI и даже разные настройки браузера будут влиять на окончательный размер отображаемого текста. Хотя многие браузеры теперь могут легко масштабировать страницу, пользователям всегда сложно повторно масштабировать ее каждый раз, когда они посещают ее, не говоря уже о том, что многие пользователи не знают, как масштабировать страницу. Лучше всего предоставить пользователям более подходящий размер шрифта по умолчанию в зависимости от их разрешения. Итак, какой размер шрифта подходит для этого размера?
12 пикселей? 14 пикселей? 15 пикселей? 16 пикселей? Или нам вообще не следует использовать единицу измерения px?
Корень проблемы в том, что все единицы размера шрифта (px, pt, em) на экране являются относительными единицами и сами по себе не могут определить фактический размер текста. Более того, фундаментальное восприятие людьми размера текста зависит от перспективы взгляда, которая зависит не только от физического размера текста, но и от его расстояния от человеческого глаза.
физический размер
Во-первых, предположим, что физический размер текста, которого мы хотим достичь, равен 16 пикселей на 17-дюймовом мониторе с разрешением 1280 * 1024. По расчетам, его высота составляет примерно 4,32 мм. Мы планируем приблизить к этому размер веб-текста на большинстве мониторов. размер, то какой размер шрифта должен отображаться при разных разрешениях?
Шаг 1. Подсчитайте основное разрешение пользователя и соответствующий размер экрана.
Чтобы преобразовать физический размер в разрешение, сначала посчитайте разрешение и соответствующий размер экрана. Распределение разрешений пользователей можно получить из статистических журналов веб-сайта. Поскольку каждой настройке разрешения может соответствовать несколько экранов разного размера, а размер экрана невозможно получить через веб-страницу, нам приходится провести статистический анализ текущего рынка мониторов: для определенного разрешения посчитать возможные диапазоны размеров экрана, от самого маленького до самого большого, относительно основного размера (или используйте середину диапазона в качестве основного размера). Как показано на рисунке ниже——
Рынок компьютерных мониторов (есть много видов продукции, и неизбежно, что кто-то упустит, данные предназначены только для справки)
Шаг 2. Рассчитайте физическую ширину экранов основных размеров для каждого разрешения.
Сегодняшние соотношения сторон мониторов включают не только стандартные экраны 4:3, широкоэкранные форматы 16:10, но и более нестандартные соотношения сторон. Для сравнения мониторов с разными соотношениями сторон для статистики используются разрешения по горизонтали. Используйте основной размер и соотношение сторон (при условии, что длина и ширина пикселей одинаковы), чтобы вычислить ширину экрана (дюймы), а затем преобразовать их в метрические (миллиметры). Сопоставив их один к одному, вы сможете увидеть тенденция размера экрана. В сочетании с пользовательским распределением каждого разрешения результаты показаны на рисунке ниже (каждая точка на изображении соответствует разрешению, горизонтальная ось — количество пикселей в горизонтальном направлении экрана, вертикальная ось — физическая ширина экрана и размер пузырька указывают на использование этого разрешения. Число пользователей Синий пузырь указывает на стандартный экран, а фиолетовый — на широкий экран): три самых больших пузырька — 1024*768, 1280*1024 и 1280*800.
Шаг 3. Рассчитайте размер шрифта на разных мониторах
Разделите физическую ширину экрана на ширину пикселя, чтобы получить ширину каждого пикселя. Затем разделите это число на указанный физический размер текста, чтобы получить необходимый размер шрифта в разных разрешениях. Например, для отображения квадратного текста размером 4,32 мм для каждого разрешения требуются следующие размеры шрифта (рассчитываются отдельно для ноутбуков и настольных компьютеров):
Размеры шрифта, необходимые для разных разрешений
Видно, что размеры ноутбуков и настольных компьютеров сильно различаются. Для удобства для расчета размера шрифта, необходимого для указанного размера шрифта в каждом разрешении, используется основной размер или средний размер каждого разрешения. (На следующем рисунке удалены те разрешения, которые в основном используются только на ноутбуках), в качестве примера взяты 4,32 мм, 3,77 мм и 3,25 мм (шрифты размера 16, 14 и 12 при разрешении 17 дюймов 1280*1024):
Чтобы поддерживать фиксированный физический размер, соотношение между требуемым размером шрифта и разрешением для каждого основного дисплея
Поскольку некоторые китайские шрифты плохо отображаются в нечетных числах, когда ClearType не включен, обычно рекомендуется использовать четные числа, например 12, 14, 16, 18 и 22 пикселя. То есть выберите ближайшее четное число для определенного разрешения. Например: 14 пикселей используется для разрешения экрана по горизонтали ниже 1100, 16 пикселей используется для экранов с разрешением от 1100 до 1500, 18 пикселей используется для экранов с разрешением выше 1500 и т. д.
расстояние до человеческого глаза
Хотя размер шрифта ноутбуков намного меньше, чем у настольных компьютеров, на самом деле он не приносит нам особых неудобств. Это связано с тем, что расстояние между человеческим глазом и экраном при использовании ноутбуков обычно меньше, чем при использовании настольных компьютеров. Когда нетбуки становятся все меньше и меньше (крайний пример — мобильные телефоны), люди могут держать их ближе при использовании, чтобы угол обзора стал больше. Напротив, когда дисплей становится все больше и больше (24 дюйма или даже больше), из-за таких соображений, как общий угол обзора, люди также могут отходить дальше от экрана, тем самым уменьшая угол обзора.
Количественно: поскольку размер текста h (4–5 мм) очень мал по сравнению с расстоянием d (30–60 см) между человеческим глазом и текстом, можно приблизительно считать, что угол обзора θ пропорционален h и обратно пропорциональна d (θ≈tgθ=h/ d). Другими словами, текст одинакового размера будет отображаться только вполовину меньше, если он находится на расстоянии двух футов от него.
Другими словами, монитор может передать лишь приблизительный размер, и каждый пользователь все равно будет корректировать фактический эффект, который он видит, бессознательно регулируя расстояние до экрана во время определенных операций. Столкнувшись с растущим числом пользователей ноутбуков (см. предыдущую статью: Доля рынка ноутбуков), дизайнеры интерфейса могут обеспечить эффект страницы только на основе среднего размера ноутбуков и настольных компьютеров, и это зависит от того, смогут ли пользователи адаптироваться.
Используйте JS для автоматической настройки размера шрифта под разными разрешениями.
Например, идентификатор элемента div, в котором находится тело веб-страницы, — это контент ——
Примечание. Чтобы гарантировать возможность масштабирования текста в каждом браузере, в качестве единицы размера шрифта используется em вместо пикселей. Обычно браузер по умолчанию имеет значение 1em=16px, а 0,875em1em1,125em — это 1416. 18 пикселей.
Обратите внимание при использовании масштабирования размера шрифта: лучше всего использовать проценты вместо фиксированных размеров шрифта для единиц размера шрифта, таких как заголовки внутри элемента div, чтобы их можно было масштабировать синхронно с текстом.
Приложение: Основные данные, приведенные в диаграммах в этой статье.
Впервые опубликовано на этом сайте: http://www.mhzx1.com.