додати матеріал


Влада народу - відносні розміри шрифтів

[ виправити ] текст може містити помилки, будь ласка перевіряйте перш ніж використовувати.

скачати

Bojan Mihelac

Відносні розміри шрифтів роблять сайти більш зручними для читання - але користь від цього не велика, якщо відвідувачі сайту не знають, як реально змінювати розміри тексту. В Internet Explorer, найбільш поширеному на даний момент браузері, ця можливість захована в одному з меню другого рівня, через що зміна розміру тексту стає надто складним завданням для багатьох користувачів. Це завдання набагато спроститься, якщо на сторінках сайту присутні кнопки, що дозволяють швидко змінити розмір шрифту.

На жаль, в більшості варіантів таких кнопок ігноруються установки користувача. У даній статті ми наводимо рішення, що дозволять міняти розміру тексту, і при цьому не вступає в протиріччя з налаштуваннями користувача.

CSS

В якості першого кроку створимо CSS-файл з основними стилями, в якому будуть використовуватися відносні розміри шрифтів у поєднанні з розміром шрифту, встановленому на машині користувача за замовчуванням. Для цього розміри ми будемо задавати у відсотках або в em-ах.

/ * Розмір шрифту за замовчуванням * /

@ Import url (small.css);

/ * Сумісні з Netscape 4 розміри шрифтів * /

body, div, p, th, td, li, dd {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

}

h1 {

font-size: 130%;

font-weight: bold;

}

h2 {

font-size: 110%;

font-weight: bold;

}

Тепер створимо п'ять альтернативних стилів, де використовуються визначені в специфікації CSS абсолютні розміри: "xx-small", "x-small", "small", "medium", і "large". У будь-якому браузері коефіцієнт масштабування між ними повинен бути 1.2, як це рекомендує стандарт CSS2. Також слід врахувати і обійти проблеми масштабування в IE5 і Opera (більш докладно ця тема розкрита в чудовій статті Тода Фарнера (Todd Fahrner) "Розмір має значення").

/ * Приклад файлу xx-small.css * /

body,

body div,

body p,

body th,

body td,

body li,

body dd {

font-size: xx-small;

voice-family: ""}"";

voice-family: inherit;

font-size: x-small

}

html> body,

html> body div,

html> body p,

html> body th,

html> body td,

html> body li,

html> body dd {

font-size: x-small

}

Отримані файли можна подивитися за даними посиланнями: xx-small.css, x-small.css, small.css, medium.css, large.css.

HTML

Тепер давайте створимо HTML-документ і підключимо до нього основний і альтернативний CSS-файли, присвоївши альтернативним файлів імена "A -", "A-", "A", "A +" і "A + +" в порядку зростання.

JavaScript

Тепер додамо в нашу HTML-сторінку перемикач таблиць стилів, взятий зі статті "Alternative Style: Working With Alternate Style Sheets".

Самі кнопки реалізуємо ось так:

Ось вихідний код перемикача стилів, а от повністю робочий приклад, протестований в Mozilla 1.6, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, і Safari 1.2. Ось і все.

Попередження

Не забувайте, у деяких версіях IE є баг, через який він починає дивно поводитися, коли перед типом документа DOCTYPE йде декларація XML.

Додати в блог або на сайт

Цей текст може містити помилки.

Програмування, комп'ютери, інформатика і кібернетика | Доповідь
5.4кб. | скачати


Схожі роботи:
Завантажувач шрифтів
Сімейства шрифтів у Windows
Аналіз шрифтів дитячої друкованої продукції
Відносні величини
Зіставляються і відносні величини
Відносні величини Медико демографічні показники
Влада і особистість влада і суспільство проблема відчуження
Придаткові пропозиції відносні та посессівная в сучасних слов`янських мовах
Єсенін с. а. - Співак від народу і для народу
© Усі права захищені
написати до нас
Рейтинг@Mail.ru