Рендеринг шрифтов на Mac VS. ПК

Question

Я использую CSS для создания веб-страницы и заметил, что Mac (Safari) отображает шрифт шире и толще, чем ПК (другие браузеры).

У меня есть десять категорий, отображаемых по горизонтали с фиксированным размером ширины 960 пикселей. Я использовал отступы, чтобы иметь некоторое пространство между каждой категорией, и это отлично выглядело на ПК, но когда я увидел его на Mac с помощью Safari, он создал две строки из-за более широкой визуализации шрифтов. Я знаю, что есть способ взломать IE, но с Safari.

Какой лучший способ правильно отобразить в Safari и других браузерах?

Answer 1

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

ul {
   display: table;
   width: 100%;
}

ul li {
   display: table-cell;
}

jsFiddle .

Вы выбираете размер шрифта, который подходит для тестируемых платформ, и позволяете display: table-cell вычислять padding .

Answer 2

Если вы хотите гарантировать, что поля вашей категории не занимают две строки, вы должны зафиксировать ширину блоков, чтобы они всегда составляли в точности 960 пикселей.

Например:

<div class="container">
  <div class="category">...</div>
  ...(9 more)...
  </div>
<div>

.container { width: 960px; margin: 0 auto; }
.category { width: 86px; padding: 5px; float:left; }

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