» » » Типографика шрифтов css
153 0  

Типографика шрифтов css

Все о шрифтах css и правильном их подключении, применении - задании размера и как сгладить шрифт.

Атрибуты для css шрифта:

font-family:Tahoma, sans-serif  – определяет вид и семейство шрифтов.
font-size:13px                  – устанавливает размер шрифта в пикселях или процентах.
font-style:italic               – превращает текст в наклонный (курсив).
font-variant:small              - caps – капитель – большие буквы маленького размера.
font-weight:bold                – определяет жирный текст.
letter-spacing:2px              – дополнительное расстояние между символами в пикселях.
word-spacing:7px                – создает дополнительное расстояние между словами в пикселях.
color:#cc0033                   – определяет цвет текста.
text-indent:40px                – устанавливает отступ строки в пикселях или процентах.
text-decoration:underline       – выводит подчеркнутый текст.
text-decoration:overline        – выводит надчеркнутый текст.
text-decoration:line-through    – выводит зачеркнутый текст.
text-transform:capitalize       – отображает каждое слово с большой буквы.
text-transform:lowercase        – преобразует все буквы в маленькие.
text-transform:uppercase        – преобразует все буквы в прописные.
text-align:justify;             - выравнивание по ширине
vertical-align:super            – отражает текст в верхнем индексе.
vertical-align:sub              – отображает текст в нижнем индексе.
word-break:break-all            - автоматический перенос слов.

/* Использование псевдоклассов для создания Буквицы */
p:first-child:first-letter {float: left; color: #903;font-size: 70px;line-height: 55px;
padding-top: 4px;padding-right: 8px; padding-left: 3px; font-family: Georgia;} 
или просто:
p::first-letter {*}

/* Краткая запись шрифта */
font: 14px Georgia, serif;
font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;
/* расшифровка */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

Подключение шрифта в файл css:

/* Гугл шрифт: */
@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic&subset=cyrillic,cyrillic-ext);


/* Свой шрифт: */
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Подключение шрифта в тело страницы:

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
</head> 

Список стандартных шрифтов:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Образцы стандартных шрифтов ClearType включён:

Образцы стандартных шрифтов

Сглаживание шрифта:

SVG метод. Потребуется - генератор веб-шрифтов

Нужно загрузить нужный шрифт в формате «.otf или .ttf» и выставить данные настройки: 

генераор веб шрифтов 

Минимально для сглаживания достаточно присоединить только только «woff» и «svg» шрифт - но желательно все!

/* пример когда папка «font» лежит в корне сайта */

@font-face {
  font-family: 'Open Sans'; 
  src: url('/font/opensans.eot');
  src: url('/font/opensans.eot?#iefix') format('embedded-opentype'),
  url('/font/opensans.woff') format('woff'),
  url('/font/opensans.ttf') format('truetype'),
  url('/font/opensans.svg#OpenSansRegular') format('svg');
  font-style: normal;
  font-weight: normal;
}

Примеры типографики шрифтов:

Всегда нужно помнить что один и тот же шрифт по разному может выглядеть на разных устройствах и конечно в зависимости от конфигурации. Пример самый модный материальный шрифт Roboto:

типографика шрифта

Всем удачи в борьбе с типографикой... 



Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019