Шрифты

Компьютерный шрифт

Файл шрифта — это файл, содержащий в себе набор символов
и соответствующих им кодов.

Символы могут быть различными по назначению:

Aa

языковые знаки

07

цифровые

☂⁂

графические

$#!

специальные

Вывод шрифтов

Растровые

Векторные

Растровые шрифты

Были распространены в эпоху матричных принтеров и экранов с низким разрешением и представляли собой набор растровых изображений каждого символа в виде битмапа.

Векторные шрифты

Векторная графика основана на математических формулах геометрических объектов.

Современные шрифты описывают символы с помощью тех самых формул, что позволяет их масштабировать без потери качества, как и любое другое векторное изображение.

Анатомия шрифта

Baseline

Базовая линия — воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов.

  • Высота прописных знаков — расстояние от базовой линии до верхней линии прописных, то есть высота прописных букв без учета свисаний.
  • Высота строчных знаков — расстояние от базовой линии до верхней линии строчных, то есть высота строчных букв без свисаний и выносных элементов.

Высота строки — расстояние между базовыми линиями строк.

Кегельная площадка — верхняя прямоугольная часть ножки литеры, на которой расположено выпуклое (печатающее) изображение знака.

В цифровом шрифте кегельная площадка важна при проектировании шрифта как прямоугольник, в который вписывается изображение знака.

Гарниту́ра в типографике — набор из одного или нескольких шрифтов в одном или нескольких размерах и начертаниях, имеющих стилевое единство рисунка и состоящих из определённого набора типографских знаков.

CSS

Размер шрифта

 

 

 

 

Размер шрифта можно установить с помощью
единиц измерения длины.

С помощью font-size можно определить размер шрифта элемента. Размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки.

Единицы измерения длины

px — размер шрифта в пикселях.

Так как задание динамического размера требуется нечасто, эта единица измерения является наиболее популярной.

 

 
p {
  font-size: 10px;
}

em или % — размер шрифта в зависимости от размера шрифта родителя. Эти размеры – относительные, они определяются по текущему контексту.

    div {
        font-size: .6em; /* то же, что и 60% */
        color: #0b0;
    }
                    

    <h2>
        Большой заголовок
        <div>Подпись к заголовку</div>
    </h2>

    <h3>
        Заголовок поменьше
        <div>Подпись к заголовку</div>
    </h3>

Большой заголовок (1em)

Подпись к заголовку (.6em)

 

Заголовок поменьше (1em)

Подпись к заголовку (.6em)

rem(root em) — подобно em наследует значение, но только <html>.

html {
  font-size: 16px;
}

h2 {
  font-size: 60px;
}

div {
  font-size: 2rem;
}


<h2>
  Большой заголовок
  <div>Подпись к заголовку</div>
</h2>

Большой заголовок (60px)

Подпись к заголовку                             (явно не 120px)

Расстояние между буквами

Для изменения данного расстояния предусмотрено
свойство letter-spacing со значением в любой
единице измерения длины, кроме процентов.

.zero {
  letter-spacing: normal;
}

.first {
  letter-spacing: -2.5px;
}

.second {
  letter-spacing: 1em;
}

it's example mfka

it's example mfka

it's example mfka

Высота строки

line-height - Высота строки. Устанавливается двумя типами значений: единицами измерения длины или безразмерным множителем.

body { font-size: 20px; }

.mult  { line-height: 1.5;   }
.pixel { line-height: 30px;  }

<div class="mult">
  <p>it's example mfka</p>
</div>

<div class="pixel">
  <p>it's example mfka</p>
</div>

it's

example

mfka

it's

example

mfka

1.5 * 20 = 30

30 = 30

it's

example

mfka

body { font-size: 20px; }

.mult  { line-height: 1.5;   }
.pixel { line-height: 30px;  }

<div class="mult">
  <p>it's example mfka</p>
</div>

<div class="pixel">
  <p>it's example mfka</p>
</div>

p { 
   font-size: 30px; 
}

it's

example

mfka

30 = 30

1.5 * 30 = 45

Расстояние между словами

Для изменения данного расстояния предусмотрено
свойство word-spacing со значением в любой
единице измерения длины, кроме процентов.

.zero {
  word-spacing: normal;
}

.first {
  word-spacing: -10px;
}

.second {
  word-spacing: 1em;
}

it's example mfka

 

it'sexamplemfka

 

it's     example      mfka

Гарниту́ра в типографике — набор из одного или нескольких шрифтов в одном или нескольких размерах и начертаниях, имеющих стилевое единство рисунка и состоящих из определённого набора типографских знаков.

Характеристики рисунка одной гарнитуры:

Наклон

example

example

Насыщенность

example​

Плотность

Начертание

font-variant

.text-small-caps {
  font-variant: small-caps;
}
<h1>Привет, как жизнь?</h1>

<h1 class="text-small-caps">Привет, как жизнь?</h1>

Устанавливает вариант прописных букв уменьшенного роста и чуть расширенных пропорций, несколько выше роста строчных.

Наклон

font-style: normal;

font-style: oblique; /* наклонный */

font-style: italic;  /* курсивный */

Насыщенность

font-weight: normal;

font-weight: bold;     /* жирное начертание  */

font-weight: light;    /* светлое начертание  */
100      /* thin          */
200      /* extra light   */
300      /* light         */
400      /* normal        */
500      /* medium        */
600      /* semi-bold     */
700      /* bold          */
800      /* extra bold    */
900      /* black         */

Плотность

font-stretch: ultra-condensed;   /* 50%  */

font-stretch: extra-condensed;   /* 62.5%  */

font-stretch: condensed;         /* узкий, 75%  */

font-stretch: semi-condensed;    /* 87.5%  */

font-stretch: normal;            /* нормальный, 100%  */

font-stretch: semi-expanded;     /* 112.5%  */

font-stretch: expanded;          /* широкий, 125%  */

font-stretch: extra-expanded;    /* 150%  */

font-stretch: ultra-expanded;    /* 200%  */

ПерерывчеГ

Классификация шрифтов в веб

Классификация шрифтов в веб:

serif

c засечками

sans-serif

без засечек

cursive

рукописный

fantasy

декоративыне

monospace

моношринные

Семейства

body {
  font-family: 'Arial';
}
body {
  font-family: Arial, Helvetica, Calibri;
}

body {
  font-family: Arial, Helvetica, Calibri, /* ?????? */;
}

Чтобы использовать нужный шрифт, пишем:

Несколько шрифтов пишем через запятую:

body {
  font-family: Arial, Helvetica, Calibri, Times New Roman;
}

Если первого шрифта нет - будет использован второй и так далее.

Как сказать браузеру, чтобы он установил шрифт по умолчанию нужного нам семейства?

  • serif — с засечками
  • sans-serif — без засечек
  • cursive — рукописные
  • monospace — моноширинные
  • fantasy — декоративные
body {
  font-family: Arial, Helvetica, Calibri, sans-serif;
}

А что, если нам нужен шрифт, которого точно нет ни в одной ОС?

Можно подключить свой шрифт на страницу с помощью at-правила @font-face.

@font-face {
  font-family: myCustomFont;
  src: url(myCustomFont.woff2)       format(woff2),
       url(myCustomFont.woff)        format(woff)
}


body {
  font-family: myCustomFont, sans-serif;
}

Если есть вероятность, что какой-либо шрифт уже установлен
на пользовательский компьютер, можно указать его через local()

@font-face {
  font-family: myCustomFont;
  src: local('Native Custom Font'),
       url(myCustomFont.woff2)       format(woff2),
       url(myCustomFont.woff)        format(woff)
}


body {
  font-family: myCustomFont, sans-serif;
}

Google Fonts

Шрифты — файлы, а файлы нужно загружать. Более того, когда шрифт загружен на страницу, он не применяется сразу.

Условные этапы работы браузера со шрифтами:

  1. Браузер получает и парсит CSS
  2. Встречает в CSS @font-face, но НЕ скачивает файл шрифта
  3. Парсит дальше и встречает указание шрифта в font-family
  4. Начинает загрузку шрифта
  5. По окончанию загрузки парсит шрифт и применяет к странице

Свойство font

font: 

variant

style

weight

size

/ line-height

family

variant

style

weight

/ line-height

body {
  font: 14px;                /* не будет работать */
  font: Arial;        /* это тоже */

  font: 14px Arial;
  font: 14px / 1.2 Arial, sans-serif;
  font: italic bold 14px Times New Roman;
  font: small-caps italic 700 14px / 20px Arial, sans-serif;
}
Made with Slides.com