Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS
есть семь ключевых слов для обозначения размера шрифта. Они введены для того,
чтобы дизайнеры особо не напрягались над проблемами доступности текстов на
страницах. Размер варьируется от xx-small до xx-large и этот размер берется
относительно установленного пользователем в браузере размера medium. Вот что мы
видим в спецификации CSS-1.
font-size: <absolute-size> Ключевое слова <absolute-size>
- это индекс в таблице размеров шрифтов, которая вычисляется и хранится
браузером. Возможные значения: [ xx-small | x-small | small | medium |
large | x-large | xx-large ]. На экране компьютера умножающий фактор равен
1.5; если medium равно 10pt, то large должно быть равно 15pt. Различные
устройства вывода могут иметь различный умножающий фактор.
Вроде бы все круто. Можно использовать на здоровье ключевые
слова и ни о чем не думать, но есть проблемы. Вот здесь мы с вами будем их
решать. И начнем, естественно, с могучего браузера Netscape 4.
Netscape 4.x
В Netscape 4 мы имеем умножающий фактор 1.5 между
индексами в таблице, то есть двигаясь от наименьшего к наибольшему, каждое
последующее ключевое слово в 1.5 раза больше предыдущего. Надо заметить, что так
рекомендовано консорциумом
в спецификации CSS-1. Однако, ни к чему хорошему это не ведет, так как
small и x-small (не говоря уже о xx-small) шрифты могут стать крайне
неразборчивы при установленном по умолчанию у пользователя размере шрифта medium.
Тогда как большие размеры выглядят уж слишком здоровыми.
Вывод напрашивается сам собой: не использовать ключевых слов для
установки размера шрифта в Netscape 4. Можно просто скрыть
«правильные» стили от него посредством инструкции @import. Для
Netscape 4 можно установить размер шрифта в пикселях, а для нормальных
браузеров переписать этот стиль посредством импортирования нормальных стилей.
WinIE 4/5
Одним Нетскейпом дело не ограничивается. К великому сожалению
WinIE 4/5 тоже некорректно поддерживает ключевые слова, но их
корректно поддерживают Netscape6/Mozilla, Opera, и MacIE5/WinIE6.
Отличие заключается в том, что для WinIE 4/5 начальным значением
является small, тогда как по спецификации CSS-1 должно быть medium. В результате
имеем, что в WinIE 4/5 шрифт будет на один размер меньше, чем в
остальных корректных браузерах.
Что же нам, бедным, делать? К счастью есть фишка, которая
позволяет обойти этот Майкрософтовский баг. Вот он, работающий пример.
body, div, p, th, td, li, dd {
/* это все для Netscape 4.x */
font-family: Verdana, Lucida, Arial, Helvetica, sans-serif;
font-size: 11px;
}
А вот эту таблицу стилей мы импортируем инструкцией @import
body, body div, body p, body th, body td, body li, body dd {
/* переписываем все стили импортированной таблицы стилей */
font-size: x-small;
/* это значение для WinIE4/5 */
voice-family: "\"}\"";
/* фишка для WinIE4/5, который некорректно парсит эту штуку и думает, что
блок стилей для этого элемента здесь заканчивается. А вообще свойство
voice-family задает список имен голосов для произнесения содержимого элемента */
voice-family: inherit;
/* восстановление */
font-size: small
/* значение для нормальных браузеров */
}
html>body, html>body div, html>body p, html>body th,
html>body td, html>body li, html>body dd {
font-size: small
/* для Opera 5 */
}
Итак, что мы имеем? Для Netscape 4.x будет
фиксированный размер шрифта в 11px. Для WinIE4/5 значение
small в браузере действительно будет соответствовать small,
а не medium. Для всех нормальных браузеров мы имеем то, что хотим, а
для Opera 5 на всякий случай объявляем правильный размер шрифта через селекторы
из спецификации CSS-2.
Этот метод работает правильно даже в том случае, если элементы
вложены, тогда как при использовании em или % всегда есть опасность, что браузер
наложит размеры, и в результате шрифт будет слишком большим или слишком
маленьким. При использовании ключевых слов шрифт никогда не будет слишком
маленьким, потому что в IE и Mozilla/Netscape 6 заложено
значение xx-small не меньше 9px.
Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее
Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее
Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее
Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее
Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее
