Використання шрифтів
Управління шрифтами на Web-сторінці пов'язане з певними труднощами. Частіше
за все ви навряд чи можете знати, які шрифти встановлені на комп'ютері
відвідувача сайта. Навіть якщо у відвідувачів цей шрифт встановлений, він може
називатися по-різному, в залежності від того, хто їх поставив або на якій
платформі вони використовуються.
Початкова специфікація HTML вирішувала цю проблему просто: в ній взагалі не
були передбачені засоби для вказівки шрифтів. Замість того, щоб вказувати шрифт
для частини тексту, в HTML була передбачена лише вказівка на те, до якої частини
структури документа цей текст відноситься. Вибір же конкретного шрифту залишався
повністю від браузера.
В останніх версіях HTML вже можна вказувати назви шрифтів. Однак від цього
буде небагато користі, якщо для Web-сторінки ви використовуєте такі шрифти, як DomCasual ВТ або Elephant. Шансів на те, що вони будуть встановлені на
комп'ютери користувачів, небагато. Тому існує велика ймовірність того, що
браузер відвідувача просто замінить ці шрифти на інші (швидше всього, на шрифт
за умовчанням), внаслідок чого сторінка з'явиться перед очима відвідувача не
зовсім в тому вигляді, на який ви розраховували.
Для роботи з шрифтами на панелі інструментів Formatting передбачено цілих сім
елементів. Кожний з цих елементів можна використати для застосування атрибута до
виділеного тексту або зняття раніше вже застосованого атрибута. Ці елементи в
числі інших більш детально описані в табл.4. Зараз
же ми просто перерахуємо їх:
- Font дозволяє застосувати до виділеного тексту вибраний вами шрифт;
- Font Size дозволяє збільшити або зменшити розмір шрифту;
- Bold застосовує до виділеного тексту напівжирне зображення;
- Italic застосовує до виділеного тексту курсив;
- Underline застосовує до виділеного тексту підкреслення;
- Font Color дозволяє вибрати колір для шрифту;
- Highlight Color дозволяє вибрати колір фону для виділеного проміжку
тексту.
Щоб отримати доступ до більшого числа настройок для тексту, виділіть
потрібний відрізок тексту і виберіть Font в меню Format (або клацніть правою
кнопкою миші по виділеному тексту і в контекстному меню виберіть Font).
Відкриється діалогове вікно Font (мал. 18).
 |
| Мал. 18. Діалогове вікно
Font |
П'ять порад по використанню шрифтів у Web-сторінках:
- Шрифти повинні бути досить великими, щоб вони легко читалися.
Залиште крихітний шрифт для хитрих адвокатів Якщо те, для чого ви хочете
використати дрібний шрифт, не володіє великою цінністю, спробуйте без цього
обійтися.
- Шрифти не повинні бути дуже великими, щоб не займати даремно простір у
вікні браузера. Використання шрифтів дуже великого розміру затрудняє
читання тексту і приводить до необхідності часто прокручувати сторінку
- Використовуйте поширені шрифти. В іншому випадку ви, швидше за все,
зіткнетеся з ситуацією, коли ваші високохудожні шрифти будуть замінюватися
браузером на ті, яких ви ніяк не чекали
- Уникайте дуже великої кількості різних стилів. Краще використати
усього декілька ретельно продуманих прийомів оформлення
- Ваша мета - контраст, а не дисгармонія. Це стосується всіх
елементів, включаючи фон і шрифт.
Далі буде наведена коротка характеристика кожного з параметрів. Ті параметри,
які в нашому списку відмічені словом (CSS), будуть відображатися тільки
браузерами з підтримкою каскадних таблиць стилів. Інші браузери їх просто
проігнорують.
- Font - дає можливість вибрати потрібний шрифт.
- Font style - дозволяє застосовувати звичайне зображення,
напівжирне, курсив і напівжирне курсивне.
- Size - дозволяє вибрати розмір шрифту (у відносному діапазоні від 1
до 7). Поруч з відносними значеннями приведені типові еквівалентні абсолютні
значення, але необхідно враховувати, що в різних браузерах вони можуть бути
різними.
- Color - дає можливість скористатися трьома стандартними діалоговими
вікнами для вибору кольору шрифту.
- Underline - застосовує до тексту підкреслення.
- Overline (CSS) - малює над текстом горизонтальну лінію.
- Blink - текст починає мерехтіти. Ті браузери, які не підтримують
цей ефект, просто проігнорують цей параметр.
- Superscript - перетворює текст у верхній індекс (тобто текст меншає
в розмірі і дещо підіймається над рядком).
- Subscript - перетворює текст в нижній індекс (текст меншає в
розмірі і притискається до нижнього кордону рядка).
- Small caps (CSS) - всі букви тексту відображаються як прописні
(дещо зменшені в розмірі).
- All caps (CSS) - всі букви тексту відображаються як звичайні
прописні.
- Capitalize (CSS) - перша буква кожного слова в тексті буде показана
прописною, навіть якщо в оригіналі вона була рядковою.
- Hidden (CSS) - виділений текст відображатися не буде.
- Strong - посилює виділений текст. Більшість браузерів відобразять
такий текст за допомогою напівжирного зображення.
- Emphasis - робить виділений текст більш виразним. Більшість
браузерів відобразять такий текст за допомогою курсиву.
- Sample - цей стиль призначений для виділення прикладів (наприклад,
результатів виконання програми). Звичайно для такого тексту використовується
моноширинний шрифт.
- Definition - для визначень. Як правило, рівнозначне виділенню
курсивом.
- Citation - для цитат. Також рівнозначне виділенню курсивом.
- Variable - для назв змінних. І для цього стилю звичайно
використовується курсив.
- Keyboard - призначений для тексту, що вводиться користувачем.
Звичайно для цього тексту передбачений моноширинний шрифт.
- Code - для прикладів програмного коду. Звичайно використовується
моноширинний шрифт.
Для негайного перегляду результатів застосування вибраних вами параметрів
призначене поле Preview.
На вкладці Character Spacing (мал. 19) можна задати відстань між буквами
і положення тексту відносно рядка.
 |
| Мал. 19. Вкладка Character Spacing
діалогового вікна Font |
- Spacing - в цьому списку можна вибрати Normal (звичайна відстань
між буквами), Condensed (для зменшення відстані) і Expanded (для збільшення).
Якщо значення зі списку вам не підходять, можна встановити своє значення в
полі By.
- Positioning - в цьому списку можна вибрати Normal (нормальне
положення тексту відносно рядка), Raised (над рядком) і Lowered (під ним).
Нестандартне значення можна встановити за допомогою поля By.
Як і на попередній вкладці, приклад застосування вибраних вами параметрів
можна відразу ж переглянути в полі Preview.
|