Область веб-друкарні значно розширилася останнім часом. Існує кілька різних причин зростання популярності, однією з широко визнаних причин є розробка системи для вбудовування власних веб-шрифтів на сайт.
В минулому ми були обмежені невеликою кількістю шрифтів, які могли використовувати на сайті. Ці шрифти найбільш типові встановлені шрифти на комп'ютерах, тому вони, швидше за все, правильно відображалися на екрані. Якщо шрифту на комп'ютері не було, він і не відображався на сайті. Тепер, коли у нас є можливість вбудовувати шрифти, у нас є значно більша палітра шрифтів на вибір, включаючи ті, які ми додаємо на сайт. також важливо знати основні засади типографіки. У цьому уроці ми збираємося подивитися на деякі з цих основних принципів і як їх застосовувати для наших веб-сторінок за допомогою HTML і CSS.
Терміни «гарнітура» і «шрифт» часто взаємозамінні, що призводить до плутанини. Ось що означає кожен термін.
Гарнітура це те, що ми бачимо. Це художнє враження від того, як текст виглядає, сприймається та читається.
Шрифт є файлом, що містить гарнітуру. Використання шрифту дозволяє комп'ютеру отримати доступ до гарнітури.
Один із способів допомогти прояснити різницю між гарнітурою та шрифтом — це порівняти їх з піснею та MP3. Гарнітура дуже схожа на пісню, в тому що це витвір мистецтва. Вона створена художником чи художниками та відкрита для публічного обговорення. Шрифт, з іншого боку, дуже схожий на МР3 тим, що він сам не справляє художнього враження, це лише спосіб передачі художньої цінності.
Додавання кольору до тексту
Зазвичай першими кроками, які ми робитимемо при створенні сайту, є вибір основної гарнітури та кольору тексту для використання. Хоча є ряд різних властивостей, які можуть бути змінені — розмір, насиченість і так далі, але гарнітура і колір тексту, як правило, мають найбільший вплив на зовнішній вигляд і читання сторінки. Позбавтеся налаштувань браузера за замовчуванням, застосуйте власну гарнітуру та колір тексту, що негайно задасть тон нашій сторінці. . Воно набуває одного значення кольору, але у різних форматах. Ці формати, як ми обговорювали в уроці 3, "Знайомство з CSS", включають ключові слова, шістнадцяткові значення та значення RGB, RGBa, HSL та HSLa. Шістнадцяткові значення є найбільш поширеними, оскільки вони забезпечують максимальний контроль з мінімальними зусиллями.
Давайте поглянемо на CSS, необхідний для зміни кольору всього тексту в межах елемента <html> на сторінці:
html { color: #555; }
Зміна властивостей шрифту
CSS пропонує багато різних властивостей для редагування зовнішнього вигляду тексту на сторінці. Ці властивості входять у дві категорії: властивості шрифту та властивості тексту. Більшість цих властивостей починаються з font-або text-. Для початку ми обговоримо основні властивості шрифту.
font-family
Властивість font-family застосовується, щоб оголосити, який шрифт, а також, які резервні або замінні шрифти повинні бути використані для відображення тексту. Значення font-family містить кілька імен шрифтів, що перераховуються через кому.
Перший зазначений шрифт, починаючи зліва, є основним вибраним шрифтом. Якщо перший шрифт недоступний, після нього вказуються альтернативні шрифти як перевага зліва направо.
Імена шрифтів, що складаються з двох або більше слів, повинні бути взяті в лапки. Крім того, останній шрифт повинен бути ключовим словом, яке означає системний шрифт за замовчуванням для зазначеного типу, найбільш популярні це sans-serif і serif.
Властивість font-family у дії виглядає так:
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
У цьому випадку Helvetica Neue є кращим шрифтом для відображення. Якщо цей шрифт недоступний або не встановлено на вказаному пристрої, буде використовуватися наступний шрифт у списку Helvetica і так далі.
font-size
Властивість font-size дає змогу встановити розмір тексту, використовуючи типові значення розміру, включаючи пікселі, em, відсотки, пункти або ключові слова.="tag"><body>:
body { font-size: 14px; }
font-style
Щоб зробити текст курсивним або запобігти цьому, ми будемо використовувати властивість font-style. Ця властивість приймає чотири ключові слова: normal, italic, oblique та inherit. З них найчастіше використовуються italic (задає текст курсивним) та normal (повертає текст до свого звичайного стилю).
Ніж CSS встановлює для всіх елементів з класом special властивість font-style як italic :
.special { font-style: italic; }
font-variant
Це відбувається не часто, але іноді текст необхідно встановити невеликими великими літерами, також відомими як капітель. Для такого особливого випадку ми скористаємося font-variant. Воно приймає три значення: normal, small-caps та inherit. Найбільш типовими значеннями є normal і small-caps, які використовуються для перемикання шрифтів між капітелем і звичайним текстом.
Для перемикання всіх елементів із класом firm, ми будемо використовувати font-variant зі значенням small-caps:
.firm { font-variant: small-caps; }
font-weight
Іноді ми хочемо зробити текст жирним або змінити насиченість гарнітури. У таких випадках ми будемо використовувати властивість font-weight. Воно приймає як значення ключове слово або число.
Ключове слово включає normal, bold, bolder, lighter та inherit. З цих ключових слів рекомендується в першу чергу задіяти normal і bold, щоб змінити текст від звичайного до жирного і навпаки. Замість використання ключових слів bolder або lighter краще застосовувати числове значення для більш точного керування.
На практиці, ось CSS для встановлення font-weight як bold для будь-якого елемента з класом daring:
.daring { font-weight: bold; }
Числові значення 100, 200, 300, 400, 500, 600, 700, 800 та 900 пов'язані з гарнітурами шрифтів, які мають кілька жирностей. Їх порядок починається з найтоншої жирності, 100, і підвищується до товстої жирності, 900. Для довідки, значення normal відповідає 400, а значення bold відповідає 700. Таким чином, будь-яке числове значення нижче 400 буде досить тонким, а будь-яке значення вище 700 буде досить жирним.
Зміна насиченості шрифту до 600 для будь-якого елемента з класом daring тепер відображає текст як жирний — не зовсім жирний, як ключове слово bold до цього:
.daring { font-weight: 600; }
Насиченість шрифту
Перед застосуванням числового значення ми повинні перевірити і подивитися, чи піде шрифт із зазначеною насиченістю. Спроба використовувати число, яке не доступне для цього шрифту, призведе до найближчого значення.
Наприклад, шрифт Times New Roman містить дві насиченості: нормальна або 400 і жирна або 700. Спроба використовувати 900 встановить шрифт у найближчу насиченість, 700 в даному випадку. class="attribute">line-height. Воно приймає всі основні значення розміру, які ми розглянули в уроці 3, «Знайомство з CSS».-Size. Це можна швидко отримати шляхом установки line-height як 150% або просто 1.5. Однак якщо ми працюємо з базовою сіткою, краще використовувати пікселі та отримати трохи більше контролю над line-height.
Погляньте на CSS, ми встановили line-height як 22 пікселі для елемента <body>, таким чином задавши 22 пікселі між кожним рядком тексту:
Міжрядковий інтервал також може бути використаний для вертикального вирівнювання по центру одного рядка тексту всередині елемента. Використовуючи однакові значення властивостей line-height та height ви вирівняєте текст по центру вертикалі:
.btn { height: 22px; line-height: 22px; }
Цей метод може бути корисним для кнопок, що попереджають повідомлень та інших однорядкових текстових блоків.
Універсальна властивість font
Всі перераховані вище шрифтові властивості можуть бути об'єднані в одній універсальній властивості font. Ця властивість може набувати кількох значень шрифтових властивостей. Порядок значень цих властивостей має бути наступним, зліва направо: font-style, font-variant, font-weight, font-size, line-height та font-family.
Ці значення перераховуються зліва направо без застосування ком (крім назв шрифтів, оскільки властивість font-family задіє коми). Коса риса (/) необхідна для розділення значень властивостей font-size та line-height.
Кожне значення властивості не є обов'язковим, за винятком значень font-size та font-family. Іншими словами, ми можемо включити лише значення властивостей font-size та font-family за бажанням.
Давайте поглянемо на приклад, який використовує всі ці властивості шрифту спільно. В наступному HTML та CSS демонструються різні можливості для стилізації тексту.
HTML
<code data-language="html">< ;h2><a href="#">Я розробник</a></h2> <p class="byline">Опубліковано: Шей Хоу</p> <p>Кожен день я бачу дизайнерів та програмістів, що працюють спільно один з одним. Вони працюють розумно, переслідуючи бізнес-мети. Вони старанно, роблячи виняткові продукти. Вони вирішують реальні проблеми та пишаються своєю роботою. Вони розробники. <a href="#">Продовжити…</a></p>
Ця демонстрація використовує псевдоклас :hover, який ми ніколи не бачили раніше. Для довідки, псевдокласи — це ключові слова, які можуть бути додані в кінці селектора для стилізації елемента, коли він знаходиться в унікальному стані.
Псевдоклас :hover визначає стиль елемента, коли користувач проводить курсор миші над цим елементом. При використанні з елементом <a>, як показано вище, всі елементи <a> отримують унікальні стилі, коли на них наводять курсор. Тепер наші елементи <a> змінять колір у цей момент.
На практиці
Повернемося назад до нашого сайту Styles Conference і почнемо додавати деякі властивості шрифту.
Ми почнемо з оновлення шрифту для нашого тексту. Для цього ми застосовуємо стилі до елемента <body>. Почнемо з color, а також додамо значення font-weight, font-size, line-height та font-family через властивість font.
У спробі зберегти наш файл main.css організованим, наскільки це можливо, створимо новий розділ для цих стилів, помістивши його трохи нижче нашого скидання і вище стилів сітки.
В уроці 4, «Відкриваємо блокову модель», ми почали додавати деякі типографські стилі, зокрема нижній margin для деяких заголовків різного рівня та абзаців. У цьому розділі файлу main.css давайте додамо колір до заголовків від першого до четвертого рівнів. }
Поки ми тут, додамо також розмір шрифту для цих заголовків. Наші елементи <h1> та <h2> будуть використовувати досить великі значення font-отже, ми також хочемо збільшити значення line-height, щоб зберегти текст усередині цих елементів розбірливим. Для довідки, ми встановимо line-height як 44 пікселя, подвоївши значення основного line-height, встановленого в правилах для елемента <body>.
Наші елементи <h5> плануються трохи більш унікальними, ніж інші заголовки. Відповідно, ми збираємося трохи змінити їх стилі.
Ми застосуємо інше значення властивості color і трохи зменшимо font-size для цих елементів, а також збираємося змінити font-weight на 400 або normal.
По За промовчанням браузери відображають заголовки з font-weight як bold. Для наших заголовків, однак, на даний момент всі font-weight задані як 300. Скидання CSS у верхній частині файлу main.css змінило font-weight на normal, а потім font-weight всередині елемента <body> поставив значення 300 для всіх заголовків.
Значення font-weight як 400 для елемента <h5> насправді зробить це трохи товщі, ніж інші заголовки та текст.
Наше скидання на початку стилів також скине стилі браузера за замовчуванням для елементів <strong>, <cite> та <em>, які ми хочемо додати назад. Для елементів <strong> ми хочемо встановити font-weight як 400, який насправді дорівнює normal, а не bold, оскільки використовувана нами гарнітура товща, ніж більшість інших гарнітур. Потім для елементів <cite> та <em> ми хочемо встановити font-style як italic.
У нас все виходить, так що давайте продовжувати, додаючи деякі стилі для наших посилань. На даний момент вони сині, так вказав стандартний браузер. Зробимо їх того ж кольору, що наші заголовки від <h1> до <h4>. Крім того, застосуємо псевдоклас :hover, щоб змінити колір на світло-сірий, коли користувач наводить курсор на посилання.
/*========================================Посилання========================================*/a:hover { color: #a9b2b9; }
a { color: #648880; }
Тепер поглянемо на наш елемент <header> і оновимо для нього наші стилі. Ми почнемо оновлення з логотипу, додавши властивості font-size та line-height у наборі правил для logo. Після додавання до існуючих властивостей border-top, float та padding, новий набір правил повинен виглядати так:
Оскільки ми трохи збільшили ширину логотипу, додамо margin до елемента <h3> всередині <header>, щоб збалансувати це. Ми зробимо це шляхом розміщення значення tagline у атрибуту class для елемента <h3>, а потім використовуючи цей клас у нашому CSS, щоб застосувати відповідні поля.
Не забувайте, що зміни в елементі <h3> мають відбутися на кожній сторінці.
HTML
<code data-language="html"><h3 class="tagline"> ;24–26 серпня — Чикаго, штат Іллінойс</h3>
CSS
.tagline { margin: 66px 0 22px 0; }
Після елемента <h3> з класом tagline настає черга елемента <nav>. Додамо значення primary-nav до атрибуту class елемента <nav>, а також властивості font-size та font-weight, щоб навігація виділялася в порівнянні з рештою заголовка.
Тепер елемент <header> у дещо кращій формі, давайте також поглянемо на наш елемент <footer>. Використовуючи клас primary-footer змінимо color та font-size для всього тексту всередині <footer>. Крім того, піднімемо font-weight для <small> до 400.
Враховуючи існуючі стилі, стиль для нашого підвалу має виглядати так:
Также оновимо трохи нашу головну сторінку. Почнемо з розділу hero і збільшимо загальний line-height у розділі до 44 пікселів. Ми також зробимо текст у цьому розділі більше, збільшивши font-size для елемента <h2> до 36 пікселей та font-size для елемента <p> до 24 пікселів.
Ми можемо внести всі ці зміни, використовуючи існуючий клас hero і створивши нові селектори для елементів <h2> та <p> ;. Наші стилі для розділу hero переробляться тепер таким чином:
Наприкінці, ми маємо невелику проблемку, яку треба виправити на головній сторінці. Раніше ми задали всім посиланням світло-сірий колір при наведенні на них. Це чудово працює, за винятком трьох тизерів на головній сторінці, де посилання охоплює обидва елементи <h3> та <h5> . Оскільки ці елементи мають власне визначення color, псевдоклас :hover, описаний раніше, не впливає на них.
>
На щастя, ми можемо це виправити, хоча для цього буде потрібно досить складний селектор. Почнемо з додавання класу teaser до всіх трьох колонок на головній сторінці. Ми будемо використовувати цей клас як відбірний селектор найближчим часом.
<code data-language="html"><section class="grid"> <!--Спікери--> <section class="teaser col-1-3"> <a href="speakers.html"> <h5>Спікери</h5> <h3>Спікери світового класу</h3>
</a> <p>До нас приїдуть понад двадцять фантастичних спікерів з усього світу, щоб поділитися своїми історіями.</p>
</section> ...
</section>
З класом teaser ми готові трохи обтяжити CSS і створити досить складний селектор. Почнемо наш селектор із цього класу, оскільки ми хочемо тільки націлюватися на елементи всередині елемента з класом teaser. Звідси ми хочемо застосувати стилі до елементів, які знаходяться всередині посилань і які навели курсор миші. Таким чином, ми додамо селектор типу спільно з псевдокласом :hover. Нарешті, ми додамо селектор типу h3, щоб вибрати дійсні елементи <h3>, до яких ми хотіли б застосувати стилі.
Загалом наш селектор і стилі для цих елементів <h3> будуть виглядати наступним чином:
.teaser a:hover h3 { color: #a9b2b9; }
Уфф, це було небагато. Хороша новина — наша сторінка Styles Conference починає виглядати дійсно приємно і показує трохи індивідуальності. png" alt="Наш сайт Styles Conference отримав трохи кохання від жменьки шрифтових властивостей">
Мал. 6.01. Наш сайт Styles Conference отримав трохи кохання від жменьки шрифтових властивостей
Застосування текстових властивостей
Знати, як встановити сімейство, розмір, стиль, накреслення, насиченість та міжрядковий інтервал це лише половина справи. Додатково ми можемо вирішити, як вирівняти, прикрасити, трансформувати текст, додати червоний рядок та міжлітерну відстань у текст. Почнемо з вирівнювання тексту.
text-align
Вирівнювання тексту є важливою частиною побудови ритму та потоку на сторінці. Ми робимо це за допомогою властивості text-align. Ця властивість має п'ять значень: left, right, center, justify та inherit. Усі ці значення досить прості; як і очікувалося, вони вирівнюють текст по лівому краю, правому краю, по центру або по ширині.
Нижче CSS встановлює текст усіх абзаців вирівняний по центру:
p {text-align: center; }
Властивість text-align, однак, не слід плутати з властивістю float. Значення text-align як left або right вирівнюють текст усередині елемента вліво або праворуч, у той час як значення float як left або right рухають весь елемент. Іноді властивість text-align дасть нам бажаний результат, інакше нам, можливо, потрібно використовувати властивість float.
text-decoration
Властивість text-decoration пропонує кілька способів прикрашання тексту. Воно приймає як значення ключові слова none, underline, overline, line-through та inherit. Використання text-decoration варіюється, але найпопулярніше застосування — це підкреслення посилань, що є стилем браузера за замовчуванням.
Тут стиль для будь-якого елемента з класом note ставить text-decoration як underline:
До одного елемента можна застосувати кілька значень text-decoration, вказуючи значення ключових слів через пробіл.
text-indent
Властивість text-indent може бути використана для створення червоного рядка всередині елемента, як це зазвичай спостерігається в друкованих виданнях. Для цієї властивості доступні всі основні значення розміру, у тому числі пікселі, пункти, відсотки тощо. Позитивні значення роблять відступ тексту всередину, а негативні значення роблять відступ назовні.
Тут CSS змінює відступ тексту для всіх елементів <p> всередину 20 пікселів:
p { text-indent: 20px; }
text-shadow
Властивість text-shadow дозволяє нам додати тінь або кілька тіней до тексту. Властивість зазвичай приймає чотири значення, всі вони перераховуються один за одним зліва направо. Перші три значення — це розмір, а останнє — колір. Четверте і останнє значення — це колір тіні, який може бути будь-яким значенням застосовуваним у властивості color.
Тут для всього тексту елемента <p> властивість text-shadow задає на 30% прозору чорну тінь, зсунуту на 3 пікселі вправо, на 6 пікселів вниз і з розмиттям 2& ;пікселя:
p { text-shadow: 3px 6px 2px rgba(0, 0, 0, .3); }
Використання негативних значень розміру для горизонтальних та вертикальних зсувів дозволяє переміщувати тіні вліво та вгору.
Кілька тіней також можуть бути з'єднані разом за допомогою розділених комами значень, додаючи більше ніж одна тінь для тексту. Застосування ряду тіней дозволяє розмістити їх вище і нижче тексту або будь-якої бажаної варіації.
box-shadow
Властивість text-shadow встановлює тінь для тексту елемента. Якщо б нам хотілося розмістити тінь для елемента в цілому, ми можемо використовувати властивість box-shadow.
Властивість box-shadow працює так само, як text-shadow, приймаючи значення для горизонтальних та вертикальних зсувів, розмиття та колір.
box-shadow також приймає необов'язкове четверте значення розміру перед значенням кольору для розтягнення тіні. Позитивне значення розтягування розширить тінь більше, ніж розмір елемента, до якого застосовується властивість, а негативне значення скоротить тінь менше, ніж розмір елемента.
Нарешті, властивість box-shadow може містити попереду необов'язкове значення inset для розміщення тіні всередині елемента, а не зовні.
text-transform
Подібно до властивості font-variant є властивість text-transform. У той час, як властивість font-variant шукає альтернативний варіант гарнітури, властивість text-transform змінить рядок тексту без необхідності альтернативної гарнітури. Властивість text-transform приймає п'ять значень: none, capitalize, uppercase, lowercase та inherit.
Значення capitalize робить заголовною першу літеру кожного слова, значення uppercase встановлює заголовною кожну літеру, а значення lowercase робить кожну букву рядковою. За допомогою none будь-які з цих успадкованих значень повернуться до вихідного стилю тексту.
Нижче CSS встановлює текст для всіх елементів <р> великими літерами:
