Рендеринг текста между OS X и Windows отбрасывает мои отступы? - PullRequest
Новая
       37

Рендеринг текста между OS X и Windows отбрасывает мои отступы?

1 голос
/ 19 марта 2011

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

.entry-title {
    color: #fff;
    background: #A3BCC3;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

.normal .entry-title {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
}

Вот скриншоты:

OS X: http://i54.tinypic.com/2a0bx1v.png

Windows: http://i56.tinypic.com/2gv4vie.png

Вы заметите, что он хорошо воспроизводится в Windows, но в OS X он на несколько пикселей выше. Они одинаковы во всех браузерах, единственное различие между операционными системами.Шрифт Quicksand Book, который реализуется через @ font-face.Если вам нужна рабочая версия сайта, она доступна по адресу http: // angryg.nom.es/rosebud.Если вам удастся это проверить, вы заметите, что у меня та же проблема с нижним колонтитулом для статического содержимого в нижней части домашней страницы.

В любом случае, любая помощь будет принята с благодарностью.

Ответы [ 3 ]

2 голосов
/ 19 марта 2011

Вам нужно указать высоту строки для конкретного браузера (болезненно), используйте этот тип свойств: 1.1 и т. Д. Вместо указания пикселей, по моему опыту, это работает лучше.

Кроме того, все еще в Mac, между Safari и Firefox вы заметите разницу между высотами строк! Так что это не только OSX против Windows.

2 голосов
/ 13 декабря 2012

Ваши шрифтовые файлы могут быть неправильными.
У меня была такая же проблема с локально установленным веб-шрифтом тоже.К счастью Google предоставил тот же шрифт, что и веб-шрифт, решил проблему для меня.

0 голосов
/ 19 марта 2011

Шрифт по умолчанию для операционных систем отличается, поэтому добавьте font-family: Arial к вашим элементам css.Он должен работать в OSX и Windows, потому что Arial поддерживается ими обоими.

...