ТОП 10:

За допомогою властивості text-shadow можна задавати декілька ефектів тіні до тексту, кожна тінь в такому випадку повинна відділятися від попередньої запятой.Попробовать »



Примітка: властивість text-shadow не дозволені в IE9 і більш ранніх версіях.

Шрифти CSS

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


Різниця між родинами шрифтів Sans-serif і Serif

Семейства шрифтiв в CSS

У CSS шрифти розділені на сімейства, кожне сімейство складається з набору шрифтів, що володіють загальними характеристиками. Існує всього п'ять родин шрифтів:

• sans-serif - шрифти без зарубок, вважається що вони краще читаються на екрані комп'ютера, ніж шрифти сімейства serif.

• serif - сімейство шрифтів із зарубками. У багатьох людей вони асоціюються з газетними статтями. Зарубки - декоративні штрихи і рисочки по краях букв.

• monospace - сімейство, що складається з шрифтів, символи яких мають однакову фіксовану ширину. Такі шрифти використовуються в основному для відображення прикладів коду програми.

• cursive - шрифти, що імітують рукописний текст.

• fantasy - художні та декоративні шрифти. Вони не дуже широко поширені, доступні не на всіх комп'ютерах і рідко використовуються в веб-дизайні.

Властивість font-family дає можливість змінити шрифт, заданий за замовчуванням. Зазвичай воно містить список взаємозамінних шрифтів, розділених комами, що належать одному сімейству. Якщо ім'я шрифту складається більш ніж з одного слова, то його потрібно вказувати в лапках. В кінці списку зазвичай вказується назва сімейства:

  body { font-family: Verdana, Helvetica, Arial, sans-serif; }

Розглянемо, як браузер обробляє список шрифтів, заданий в нашому властивості font-family:

1. Спочатку він перевіряє, чи встановлений шрифт Verdana на комп'ютері, і, якщо так, використовує його як шрифту для тексту всередині елемента (у нашому випадку всередині елемента <body>)

2. Якщо Verdana не встановлений, то шукає шрифт Helvetica. У разі успішного пошуку використовує його всередині <body>.

3. Якщо і Helvetica не встановлений, то шукає шрифт Arial. Якщо він є на комп'ютері, то застосовує його всередині <body>.

І нарешті, якщо жоден із зазначених шрифтів не знайдений, застосовується перший, знайдений браузером на комп'ютері шрифт з сімейства sans-serif. Таким чином браузер зможе самостійно визначити відповідний шрифт з сімейства.

Примітка: при виборі тільки одного певного шрифту важливо розуміти те, що браузер відобразить його тільки в тому випадку, якщо даний шрифт встановлений на комп'ютері користувача. Якщо шрифт не буде знайдений, то текст буде відображений шрифтом "Times New Roman", який заданий за замовчуванням у всіх браузерах.

Стиль шрифту

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

• normal - стандартний текст, що має звичайне написання, тобто не курсивное і не похиле

• italic - курсивне зображення

• oblique - похиле накреслення

Курсивні шрифти традиційно були стилізованими версіями шрифту, заснованими на каліграфії, в той час як похиле накреслення створювалося простим додаванням невеликої нахилу символам. Більшість шрифтів не містять набір курсивних символів, тому браузер часто використовує алгоритм нахилу для символів тексту. Це означає, що в багатьох випадках ви не побачите різниці між значеннями italic і oblique.

Розмір шрифту

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

Для зміни розміру шрифту використовується властивість font-size. Існує кілька способів вказати розмір шрифту, розглянемо найбільш поширені з них:

Пікселі

Значення в пікселях використовуються часто, оскільки такий підхід надає дуже точний контроль над розміром. Числове значення закінчує літерними символами px, які повинні слідувати відразу після числа (між числом і px не повинно бути пробілу).

  body { font-size: 14px; }

Відсотки

За замовчуванням розмір шрифту в браузерах дорівнює 16px. Таким чином, значення 100% відповідає 16px, а 200% - 32px. Якщо ви визначите правило, що задає всьому тексту всередині елемента <body> значення 75% від розміру за замовчуванням (це буде відповідати 12px), а потім визначте ще одне правило, яке задає значення 75% для його дочірнього елемента, то рамер шрифту в цьому елементі дорівнюватиме 9px (тобто 75% від 12px).

  body { font-size: 100%; }

EM

Одиниця виміру em дозволяє змінити розмір шрифту щодо розміру шрифту в батьківському елементі. Поскільки за замовчуванням розмір шрифту в браузерах состовляет 16px, то можна використовувати правила, аналогічні тим, які використовуються для значень у відсотках.

  body { font-size: 14px; } h2 { font-size: 1.2em; }

У прикладі ми задали елементу <body> розмір шрифту 14px, а для всіх елементів <h2> - 1.2em. Це означає, що розмір шрифту заголовків другого рівня буде масштабований з коефіцієнтом 1,2. У нашому випадку розмір усіх заголовків <h2> буде состовлять 1,2 розміру шрифту елемента <body>, що означає в 1,2 рази більше, ніж 14px, і приблизно дорівнює 17px. (Насправді розмір буде дорівнювати 16,8, але більшість браузерів округлить його до 17.)

Примітка: по суті відсотки і em, це два різні способи для досягнення однієї і тієї ж мети. Вони обидва дають можливість задати розмір щодо розміру шрифту батьківського елементу.

Ключові слова

CSS пропонує сім ключових слів, які дозволяють призначити розмір шрифту щодо розміру за замовчуванням (16px): xx-small, x-small, small, medium, large, x-large і xx-large.

p { font-size: small; }

Середнє значення medium - розмір шрифта в браузерах. Останні значення зменшують або збільшують розмір шрифту з різними коеффеціентамі. Найменший розмір шрифту xx-small дорівнює приблизно 9 пикселям, кожний наступний розмір приблизно на 20% більше попереднього.

"Безпечні" (стандартні) Web-шрифти

В інтернеті історично склалося таке поняття як "безпечні" Web-шрифти. Безпечним шрифтом можна назвати такий шрифт, який підтримується операційною системою користувача з дуже високим ступенем імовірності. Оскільки про такий стан справ залишається тільки мріяти, то абсолютно безпечних шрифтів не існує!

Основою для визначення "безпечних" шрифтів послужили шрифти найбільш поширеною операційної системи - Windows, які крім того використовуються в інших ОС:

Шрифти із зарубками - serif







Последнее изменение этой страницы: 2016-04-07; Нарушение авторского права страницы

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.94.202.172 (0.022 с.)