Я работаю с SIFR 3.0 уже некоторое время, и кажется, что размер шрифта никогда не работает правильно. Я понимаю самые основные концепции SIFR. SIFR запускается при загрузке страницы. Он выполняет некоторые вычисления, размер которых соответствует размеру HTML-шрифта, а затем заменяет его флэш-фильмом, примерно равным этому размеру. По этой причине вы хотите, чтобы ваш шрифт HTML соответствовал размеру шрифта SIFR как можно ближе.
Моя проблема всегда возникает, когда я пытаюсь подобрать эти два размера шрифта. Допустим, я хочу использовать шрифт SIFR Helvetica Neue Lt размером около 32 пикселей. Эквивалент HTML - это что-то вроде Arial Narrow размером около 36 пикселей с некоторым отрицательным межбуквенным интервалом. Вот что я делаю.
В sifr.css я напишу:
@media screen {
.sIFR-active h1 {
visibility: hidden;
z-index: 0 !important;
font-size: 36px;
}
}
Отлично, он получает шрифт HTML по умолчанию нужного мне размера. Теперь мне нужно обновить размер шрифта flash SIFR. Поэтому я захожу в sifr-config.js и пишу что-то вроде этого:
sIFR.replace(HelveticaNeueThinCond, {
selector: 'h1',
css: '.sIFR-root { color: #762123; font-size: 32px; line-height: 1em; }',
transparent: true
});
Так что сейчас все отлично работает. До тех пор, пока мой текст h1 не обернется более чем на одну строку. По какой-то причине, когда текст переносится, он показывает только первую строку. Вроде высчитывает высоту неправильно. Это очень странно, потому что я провел несколько тестов. Я убрал «видимость: скрытый» из «sIFR-active h1», чтобы убедиться, что отображаемый текст HTML имеет правильный размер. Это занимает две строки. Однако, когда Flash заменяет этот текст, он дает ему минимальную высоту одной строки текста. Одд.
Единственный способ найти эту проблему - это удалить "font-size: 32px;" из "sIFR.replace (HelveticaNeueThinCond" в sifr-config. Проблема, с которой я столкнулся, заключается в том, что он наследует размер шрифта, установленный в sifr.css. Теперь проблема в том, что мой HTML-текст больше, чем текст SIFR. Так что иногда мой текст HTML будет перенесен на новую строку, прежде чем текст SIFR оставит большой пробел.
Итак, как мне установить два разных размера шрифта (один для моего текста HTML и один для моего SIFR) без потери переноса.
Единственный раз, когда я смог успешно использовать это, когда у меня есть шрифт SIFR, который настолько похож на веб-безопасный шрифт, что они могут использовать один и тот же атрибут font-size.
Спасибо
Спасибо, Марк. Как объяснено, если я удаляю font-size из sIFR.replace, он по умолчанию будет использовать размер шрифта, объявленный в .sIFR-active. Я объявляю два разных размера шрифта по причине, я хочу, чтобы sIFR.replace имел размер шрифта 32px, а sIFR-active имел размер шрифта 26px. Таким образом, они совпадают как можно ближе. Нет ли способа сделать так, чтобы ваш шрифт flash (sifr.replace) отличался от размера шрифта HTML (sifr-active)?
Обязательно ли иметь одинаковый размер шрифта? Не имеет большого смысла, если это правда. Как еще вы могли бы настроить два шрифта так, чтобы они занимали одинаковые межбуквенные интервалы / строки?