Блог

Главная - Вопросы по программированию - Почему шрифт выглядит по-разному на разных платформах?

Почему шрифт выглядит по-разному на разных платформах?

#html #css #cross-browser

#HTML #css #кроссбраузерный

Вопрос:

Рассмотрим следующий пример: (живая демонстрация здесь)

HTML:

 <label>Name</label>

CSS:

 label {
  font-family: serif;
  font-size: 16px;
}

JS:

 $(function() {
  console.log($("label").width());
});

Когда я запускаю этот пример в Windows 7 с Firefox, результатом является 38 . Но, когда я запускаю тот же пример на Ubuntu (используя VirtualBox) с Firefox, результат 48 . В обоих случаях версия Firefox 7.0.1.

В чем эта разница? Как я мог бы сделать так, чтобы это было одинаково?

Ответ №1:

Вы не указываете фактический шрифт; «serif» — это просто мета-название для любого шрифта с засечками, и браузер будет использовать разные значения по умолчанию для этого на разных платформах и браузерах.

Но даже если вы указали шрифт, который, вероятно, существует на любой платформе (например, в core fonts for the web), из-за разной отрисовки шрифтов результат все равно может быть неодинаковым; отрисовка шрифтов Windows действительно создает агрессивные намеки на шрифт (максимально вытесняя буквенные формы в пиксельную сетку), В то время как Mac OS, Gnome и т.д. Используют менее агрессивные намеки. Этот эффект может привести к изменению ширины текста на несколько пикселей даже при одинаковом шрифте и размере.

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

Ответ №2:

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

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

Это может помочь:http://www.sitepoint.com/css-font-sizing-tutorial

Ответ №3:

Кроме того, в некоторых браузерах размер шрифта определяется пользователем. Поэтому вы можете захотеть проверить каждый браузер, чтобы убедиться, что настройки размера шрифта одинаковы. (Вот почему мне нравится использовать ems вместо px для размеров шрифта.)