Рендеринг шрифтов / проблема высоты строки на Mac /ПК (вне элемента)

Question

Рендеринг шрифтов / проблема высоты строки на Mac /ПК (вне элемента)

Конструкция

содержимое виджетов info должно быть выровнено по вертикали посередине как таковое:

Закодированный Дизайн

Windows: Chrome 20 / FF 14 / IE 9

Mac (Lion / Mt. Lion): Chrome / FF

Код

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle;
        padding:3px 15px 0;
    }
        .display p {padding:0;line-height:1em;}
        .time, .date {padding-top:5px;}
            .time p, .date .number {font-size:35px;}
            .time span, .display .month-day, .conditions {
                font-size:14px;
                text-transform:uppercase;
                font-family:"Maven Pro", Arial, sans-serif;
                line-height:1.15em;
                font-weight:500;
            }
            .display .month-day {padding-left:5px;}
            .icon {float:left;padding:0 12px 0 0}
            .display .temperature {font-size:24px;padding:4px 0 0;}
            .display .conditions {text-transform:none;padding:2px 0 0;}
    .lt-ie9 .display { /* IE rgba Fallback */
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
        zoom:1;
    }

Вопрос

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

Windows

Mac

Примечание

Я встраиваю шрифты через таблицу стилей веб-шрифтов Google.

проверен

Я пробовал следующие:

установите линию-высоты на каждом элемент.
установить вес шрифта на каждом элементе.
установить высоту на каждом элементе.
сочетание высоты / обивка-сверху на каждом элементе.
используемые проценты / em/px для заполнения.

кажется, что независимо от того, что я пытаюсь, контент никогда не будет идеально выравниваться по центру на mac и ПК.

мой вопрос(ы)

можно добиться того, что я пытаюсь сделать в упрощенном манеры?

должен ли я отказаться от display:table-cell; маршрут и установить определенные высоты / отступы на каждом элементе и дочернем элементе? Я все равно столкнусь с проблемами заполнения / интервала между двумя ОС.

что я должен классифицировать этот вопрос? Высота линии? Таблица-ячейки? ОС? так далее...

спасибо заранее!

9 56

html css css-tables vertical-alignment

9 ответов:

мое решение этой (очень раздражает проблема):

установите все элементы в float: left;

установить явные высоты линий;

наслаждайтесь победой над кроссбраузерной / платформенной css-нелепостью.

4

я столкнулся с этой проблемой с пользовательским шрифтом, который был создан для бренда клиента. Я открыл шрифт TTF в Font Forge. Способ, которым я создал единообразие с рендерингом, состоял в том, чтобы настроить значения в элементе->Font Info->OS/2->Metrics.

Win значения подъема/спуска, по-видимому, работают по-разному для других значений. У меня было следующее значения:

Win Ascent: 1000

Win Descent: 0

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

Я изменил значения подъема и спуска Win на:

Win Ascent: 750

Win Descent: 250 (обратите внимание на положительное значение)

похоже, вам нужно соответствовать значениям, за исключением того, что в моем случае мне нужно было инвертировать значение Win Descent на положительное.

у меня очень ограниченные знания о шрифтах, но это исправило мою проблему. Я сгенерировал шрифт как TTF, а затем запустил его через генератор веб-шрифтов. Шрифты теперь отображаются одинаково на Mac/Windows 7/Android / iOS.

надеюсь, это кому-то поможет.

4

часть проблемы может быть в том, как Windows / Mac OSX отображает шрифты. В частности, те, которые вводятся через @font-face. Вы пробовали переключаться, какие форматы шрифтов используются?

1

Я был свидетелем той же проблемы, с пользовательским шрифтом (Trade Gothic), обслуживаемым FastFonts.

Windows сделала то, что должна была. Но все другие браузеры на машинах на базе Linux, Mac, iOS, Android страдали от этой проблемы.

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

тогда мои стили могут переопределить высоту линии, специфичную для устройств, отличных от windows.

1

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

Если у вас есть TTF, загрузите его в FontSquirrel, выберите опцию "эксперт", а затем сохранить все параметры по умолчанию. Тот, который исправляет его, я считаю, это " исправить вертикальные метрики."но у меня были проблемы при изменении значений по умолчанию, поэтому я рекомендую сохранить их как есть.

теперь высота строки шрифта отображается одинаково на MAC и ПК (это сработало для меня).

1

Я также столкнулся с этой проблемой. Ответ люка помог мне. Мне пришлось настроить шрифты с помощью FontForge, используя следующие настройки:

снимите все флажки" смещение", а также флажок" действительно использовать метрики опечатки". У меня было больше всего проблем с Firefox и IE. Играя со значением "Win Descent", исправил его для этих двух браузеров.

1

Mac правильно отображает длины ниже базовой линии как принадлежащие высоте линии. Кажется, что OS X подсчитывает снизу вверх, тогда как Windows вычисляет сверху.

поскольку 1em-это ширина заглавной буквы M используемого шрифта, она обычно меньше общей высоты шрифта.

вы пробовали установить высоту линии такой же, как высота элемента? Это обычно помогает решить такие проблемы.

0

Это вызвано историей формата шрифта и войнами Windows/Mac, есть разные способы вычисления высоты линии, и если они не синхронизированы в используемом шрифте, все пойдет не так на некоторых системах

вам нужно исправить ваш шрифт (если лицензирование позволяет) или переключиться на один без этой проблемы

см.http://www.webfonts.info/node/330 (внимание, это рекламный ролик, даже если техническая информация верна)

лучше, чтобы не сделать ваш дизайн зависит от точного значения здесь

0

Henrik · Accepted Answer · 2013-04-07 11:19:32

Если он разрешен с помощью другого шрифта (Arial), то проблема заключается в шрифте, а не в CSS. Как вы заметили, рендеринг шрифтов отличается между браузерами.

одним из возможных решений может быть загрузка шрифта Cutive (я вижу, что у него есть лицензия SIL), а затем запустите его через генератор шрифтов Squirrel font-face. В режиме " эксперт "есть возможность" исправить вертикальные метрики", которые могут быть тем, что вы ищете.