Працягваем css прыгажосці

font – шрыфт на старонке. Мацнейшая зброя дызайну.
Праглядзіце прыклады1, прыклады2 і падумайце які адсотак дызайну сайта бяруць на сябе шрыфты?
Што да css, гэта універсальная ўласцівасць, дазваляе задаваць некалькі характырыстык праз прабел. Абавязкова павінны быць заданы 2 характырыстыкі font-size і font-family.
Пазнаёмімся з усімі характырыстыкамі:

font-style – бывае звычайны, курсіўны і нахілены, усё проста. Напрыклад зададзім курсіўны(italic) шрыфт

            <head>
body {
font-style: italic;
}
</head>
<body>
I am italic text!
</body>

font-weight – усталёўвае насычынасць шрыфту. Напрыклад значэнне bold.

            <head>
.attention {
font-weight: bold;
}
</head>
<body>
I love <span class="attention">CSS</span>
</body>

Падбіраемся на самага цікавага
font-family – сямейства шрыфту. Памятаеце ў вордзе мы можам абраць Times New Roman або Calibri? Гэта яно і ёсць. Напрыклад паставім тыповы Arial.

            <head>
body {
font-family: Arial;
}
</head>
<body>
I am from sans-serif family!
</body>
Таксама сямействы можна пералічаць праз коску. Калі на вашам кампутаре ня адшукаецца першае сямейства, то падставіцца другое і г.д.
Напрыклад, зараз прыменіцца шрыфт serif.
            <head>
body {
font-family: notfoundfont, serif, san-serif;
}
</head>
<body>
"notfoundfont" does not exist on computer, use next family - serif.
</body>
Сямейства – гэта фактычна назва шрыфту, то бок якое сямейства мы паставім так і будзе выглядаць наш шрыфт. Як ж рабіць смак? Дзе браць крутыя шрыфты?
Бясплатная калекцыя ад google fonts Будзе ўважлівы, што шрыфты бываюць кірылічныя(літары нашага алфавіту) і лацінскія(лацінскі алфавіт). Абіраем шрыфт Alef, які нам спадабаўся, ціскаем “add to collection”(дадаць у калекцыю). Далей ціскаем на калекцыю, абіраем вакенца “use” і робім 3, 4 крок.
Нам трэба падключыць сгенерыраваны css .Ён будзе запампоўваць гэты шрыфт карыстальніку.
Далей проста карыстаем патрэбны font-family body {font-family: 'Alef', serif} Крута! Бяром у альбомах вк суполкі vk.com/design.school. Тут нам не генерыюце той css, мы толькі спампуем файл с шрыфтом.
Як жа падключыць шрыфт, калі мы маем толькі файл з шрыфтом? Паглядзім той самы сгенерыраваны css ад гугл фонт і зробім па аналёгіі:
                @font-face {
                  font-family: 'Alef';
                  font-style: normal;
                  font-weight: 400;
                  src: local('Alef Regular'), local('Alef-Regular'), url(http://themes.googleusercontent.com/static/fonts/alef/v1/C8wmYJieZdfX3SNk-GwKVA.woff) format('woff');
                }
            
Што тут адбылося, далі назву сямейству, выставілі стыль і насычанасць, паставілі шлях да файлу(src): спачатку спрабуем адшукаць усталёваны шрыфт на кампутары, калі на кампутары няма, то шлях на знешні url з адпаведным фарматам файлу. Пасля просто карыстаем font-familyfont-family: 'Alef'. Розніца ў тым што мы напісалі css самі з адпаведнай назвай сямейства і шляха да файлу.
Трэці шлях адшукаць шрыфт гэта ўзяць з сайту. Напрыклад Вам спадабаўся шрыфт на course.by. Проста інспектуем тэкст, і ў вакенцы “Computed Style” знаходзім значэнне ўласцівасці font-family. Тут ‘Open Sans’. Даведаліся назву далей забіваем у гугл і шукаем сам шрыфт(верагодна будзе ў гугл шрыфтах), ці пампуем прама з сайту(url у @font-face).

font-size – памер шрыфту. Стандартны памер шрыфту на старонке 16px; Нарэшце скарыстаем 2 неабходныя характырыстыкі для ўніверсальнай уласцівасці font. Зробім памер 20px і сямейства Arial;

            <head>
header {
font: 20px Arial;
}
</head>
<body>
<header>I have 20px size.</header>
I have default size 16 px;
</body>
Нагадаю, што ўласцівасць font дзеці бяруць у спадчынасць ад сваіх бацькоў. Шрыфты могуць вымярацца ў px, %, em, pt; Стандарты памер 16px=1em=100%=12pt Px – фізічныя “кропкі” дысплею.
Pt – карыстаюць у тыпаграфіі(1/72 дюйма), не для web.
Em – адносны шрыфт, напрыклад body мае памер 20px, а мы header – 2em(40px), aside – 0.5em(10px). Калі мы зменім памер у body на 10px, то адпаведна памер header стане 20px а aside 5px. % – тое ж, што і em. Адзінае адрозненне што па факту шрыфты будуць розных памераў – калі мы залезем ва уласцівасці браўзера і скінем налады text-size з сярэдняга на іншы.
Зараз адносныя памеры(pt,%) выціскаюць статыку(px), таму што сайт адаптуюцца пад розныя разрозненні, і напрыклад на смартфонах варта адлюстроўваць меншы шрыфт чым на mac-маніторах. Падрабязней гэта будзе разгледжана ў наступных занятках.

Таксама шрыфтамі(не малюнкамі) пачалі рабіць іконкі, глядзіце прыклад font-awesome Гульня з шрыфтамі часцяком прыводзе для стварэння лагатыпаў

color – задае колер тэксту.

            <head>
p {
color: grey;
}
</head>
<body>
<p>I am grey text!</p>
I am default coler text;
</body>

Хатняе заданне:
падключыць шрыфт з google web fonts.
падключыць шрыфт з http://vk.com/design.school
зрабіць простую тыпаграфіку(для .header1, .header2, .header3 адзін шрыфт і розны font-size(задаць у еm), астатнія элементы – другі шрыфт)
зрабіць лагатып шрыфтом – вялікі памер і розныя каляры(уласцівасць color)

Наступны занятак