Размер имеет значение
Дата публикации: 10/06/2003
Категория: CSS - каскадные таблицы стилей
Версия для печати Проблема размера шрифтов всегда волнует
веб-разработчиков. В 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 мы имеем умножающий фактор
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.
Источник: http://www.web-anatomy.f2s.com/css/13.php
Тодд Фарнер (Todd Fahrner) и A
List Apart
Источник: webmascon
Перевод: FireFalcon
Статьи по теме:
