причина различий в размере шрифта
Разница в размерах шрифтов между Mac-OS и Windows-OS не обязательно является результатом разных шрифтов, потому что это также произойдет, когда вы используете одинаковые шрифты и размеры. Вместо этого историческая причина (см. Эту справочную статью ): Windows отображает текст с 96 DPI, а MacOS использует 72 DPI. Иногда вы можете увидеть даже разные значения DPI, например, когда вы выбираете Большие шрифты в свойствах Windows Display (это увеличивает DPI).
Путаница и физика
В этом много путаницы. Конечно, пиксель - это пиксель, так как может один экран иметь 72 точки на дюйм в MacOS и тот же экран 96 точек на дюйм в Windows? Ну, это не может. Значения дюймов здесь не являются реальными. Они логические дюймы. 72 DPI означает: 72 пикселя на вашем текущем экране (и каждый экран отличается!) Мы считаем, что это был один дюйм. Это ни в коем случае не равно дюйму на бумаге, то есть 2,54 см в физическом мире.
Назад к веб-страницам и вашей проблеме
Как все это связано с вашей проблемой? Потому что я предполагаю, что вы используете очки (хорошо!) Для ваших размеров. И одна точка определяется как 1/72 дюйма (72 точки идут на один дюйм). Теперь, когда вы знаете, что дюймы на экранах не являются реальными и что каждая ОС ставит разные точки по умолчанию на каждый логический дюйм, вы также знаете, что точки (или mm, in или pc) различны для система.
На пути к (не идеальному) решению
Но вы можете спросить, если все одинаково пропорционально изменено, все должно быть в порядке и превосходно, условно говоря? Нет не совсем Если вы используете изображения или пиксели для размеров других элементов, это не будет работать. Пиксели - это единственный абсолютный логический размер, который вам доступен (даже неудивительно, что это ни в коем случае не точный размер: размер пикселя зависит от монитора). Если вы укажете пиксели, вы превзойдете ограничения DPI или PPI, наложенные ОС (еще одна историческая справка ). I.e.:
/*
different font-size per OS / DPI display
setting compared to input box
*/
input.text {
width: 120px;
font-size: 10pt;
}
/*
equal font-size per OS / DPI display
setting compared to input box
*/
input.text {
width: 120px;
font-size: 12px; /* typically, pixels are slightly smaller than points */
}
Однако, даже в приведенном выше сценарии проблемы с рендерингом могут отразиться на вас. Локальные таблицы стилей, доступные шрифты, изменение размеров областей просмотра и сглаживание могут еще усилить тонкие различия. Но это самое близкое, что можно сделать, игнорируя правила, зависящие от ОС.
Одна тонкость: как только вы начнете использовать пиксели, вам может быть легче измерить ваш шрифт по сравнению с вашими изображениями, но вы потеряете возможность масштабирования всего вашего дизайна, и вы будете застревать с указанием точных размеров везде. Так что, будет ли это хорошей идеей в вашей ситуации, решать только вам (обычная практика - придерживаться точек и оставить рендеринг браузерам и ОС, чтобы дать пользователям опыт того, к чему они привыкли в своей системе).
Helvetica vs Arial решение
В этой теме было высказано предположение, что Helvetica - это визуализированный шрифт в MacOS и причина различий. Чтобы быть уверенным, взгляните на эту страницу, чтобы узнать, как обнаруживает Helvetical против Arial на визуализированной странице. Если вы используете следующий CSS, ваша страница будет отображаться в Windows (Arial) иначе, чем в MacOS (Helvetica):
input.text {
font-family: Helvetica, Arial, sans-serif;
}
Но если вы используете следующий код, он будет выглядеть одинаково на Windows (Arial) и MacOS ( также Arial ). Только Linux будет выглядеть по-другому, если только не установлены шрифты Windows .
input.text {
font-family: Arial, Helvetica, sans-serif;
}
Странный маленький баг с моноширией может привести к путанице
Если вы используете моноширинные шрифты, и даже если вы указываете сам шрифт, у вас могут остаться различия в рендеринге. В Firefox, но также и в некоторых других браузерах есть скрытая ошибка, о которой я недавно сообщал (в блоге объясняются решения), но она не привлекла к себе большого внимания.
Самое простое решение - указывать Courier New всегда, даже если вам не важен шрифт.Я не думаю, что это была проблема в вашем случае, как вы упомянули Arial и Helvetica.
Заключительные мысли
Почему все это хлопотно, а не один стандарт?Прочитайте отличную справочную статью о том, почему Windows считает, что лучше увеличить DPI на 30%.
Дополнительная информация: существует целый сайт , посвященный проблемам DPI .