Воскресенье, 15.06.2025, 18:01 | | Регистрация | Вход Приветствую Вас Гость | RSS

Добавь в закладки

Облако(Большое облако)


Статистика






Catalog-Moldova - Ranker, Statistics


Онлайн всего: 2
Гостей: 2
Пользователей: 0

Пользователи
Гости
Ссылки партнеров
Форма входа
Главная » Справочник » 2 Разработка дизайна » 11 Размер шрифтов

Размер шрифтов
Untitled Document

Размер шрифтов

Проблема размера шрифтов всегда волнует веб-разработчиков. В 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.

По материалам сайта: http://karman.com.ua/

Категория: 11 Размер шрифтов | Добавил: O3OH (29.11.2010)
Просмотров: 409 | Рейтинг: 0.0/0
Почитать по теме
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Меню справочника
00 Разработка дизайна [1]
01 Правила хорошего тона в веб дизайне [1]
02 Веб-дизайн и модели поведения [1]
03 Цветовые решения для сайта [1]
04 Какой вид дизайна выбрать [1]
05 Эффективное расположение графики и текста [1]
06 Рисуем макет сайта [1]
07 Графика - советы для начинающих [1]
08 Оформление текста [1]
09 Советы по WEB-дизайну [1]
10 Работа с фоном [1]
11 Размер шрифтов [1]
12 Форматы изображений на веб-сайте [1]
13 Создание и оптимизация изображений для Web-сайта [1]
14 Точечные и векторные изображения [1]
15 Методы размещения изображений на веб-сайте [1]
16 Анимация изображений [1]
17 Веб-анимация [1]
18 Flash-технология [1]
19 Баннеры [1]
20 Фирменный стиль [1]
21 Web-дизайн и кодировки [1]
22 Favicon - иконки Вашего сайта [1]
-------В каталоге-------

Скачать [205]
Скачать книги [32]
Загрузить [45]
Купить [308]
Найти [91]
Найти информацию [24]
Найти отдых [6]
Посмотреть [61]
Послушать [4]
Послушать радио [4]
Поиграть [39]
Поиграть в игры браузерные [17]
Поговорить [18]
Поговорить на форумах [4]
Заказать [97]
Разное [54]

allfun.com.ua
Категория: Посмотреть приколы
Рейтинг:⋀ 1606660
Переходы: 3216
Подробнее
Brand-studio
Категория: Загрузить фотографии
Рейтинг:⋀ 1438020
Переходы: 489
Подробнее
Ex.ua
Категория: Скачать фильмы
Рейтинг:⋀ 1126881
Переходы: 8554
Подробнее
4 tfile.ru
Категория: Скачать торрент
Рейтинг:⋀ 314611
Переходы: 3117
Подробнее
5 zoomby.ru
Категория: Посмотреть фильмы онлайн
Рейтинг:⋀ 282580
Переходы: 1223
Подробнее
6 Bit2Bit :: Список ссылок
Категория: Скачать фильмы
Рейтинг:⋀ 164140
Переходы: 800
Подробнее
7 My-hit
Категория: Скачать фильмы
Рейтинг:⋀ 161770
Переходы: 2227
Подробнее
8 4game.ru
Категория: Поиграть в игры онлайн
Рейтинг:⋀ 137210
Переходы: 1097
Подробнее
9 Mptri.net
Категория: Скачать музыку
Рейтинг:⋀ 130550
Переходы: 2095
Подробнее
10 smotri.com
Категория: Скачать музыку
Рейтинг:⋀ 114260
Переходы: 2853
Подробнее
11 uaget
Категория: Скачать фильмы
Рейтинг:⋀ 111521
Переходы: 1996
Подробнее
12 nomer.org
Категория: Найти человека
Рейтинг:⋀ 107910
Переходы: 1638
Подробнее
13 ohota-ribalka
Категория: Поговорить на форумах "Охоты" и "Рыбалки"
Рейтинг:⋀ 107360
Переходы: 647
Подробнее
14 mp3lemon
Категория: Скачать музыку
Рейтинг:⋀ 97102
Переходы: 1961
Подробнее
15 rutor.org
Категория: Скачать торрент
Рейтинг:⋀ 95570
Переходы: 1313
Подробнее
16 tutmp3.net
Категория: Скачать музыку
Рейтинг:⋀ 95460
Переходы: 1933
Подробнее
17 rutracker.org
Категория: Скачать торрент
Рейтинг:⋀ 90790
Переходы: 1186
Подробнее
18 txt.uz
Категория: Скачать книги электронные (.doc,.txt,.rtf)
Рейтинг:⋀ 76030
Переходы: 1188
Подробнее
19 proc.com.ua
Категория: Скачать фильмы
Рейтинг:⋀ 67550
Переходы: 1234
Подробнее
20 japonwarez.com
Категория: Скачать фильмы
Рейтинг:⋀ 63220
Переходы: 1091
Подробнее
Rambler's Top100 Яндекс цитирования Экспресс анализ сайта Рейтинг@Mail.ru Анализ сайта Український рейтинг TOP.TOPUA.NET
    O3OH © 2009-2025     Вверх