Font-size: от xx-small до xx-large

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1.

font-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 раза больше предыдущего. Надо заметить, что так рекомендовано консорциумом W3 в спецификации 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.