Шрифты

На данной странице будет рассмотрено использование шрифтов на ФЭНДОМе.

## 0. А нужно ли?

Есть два важных вопросов, на которые нужно ответить, прежде чем выбирать новый шрифт:

1. Для чего нужен шрифт?
2. Устраивает ли нас стандартный шрифт?

Если вы ответили на второй вопрос "да" — то не меняйте шрифт. Классно, не правда ли?

Если же вы ответили "нет" — то придётся листать дальше и думать, как мы будем играться шрифтами.

## 0.25 Как делать

Для изменения шрифта нам нужно использовать CSS и свойство `font-family` примерно вот так:

```
/* Для всей страницы (не делайте так, иначе нарушите УИ) */
body {
  font-family: sans-serif;
}

/* Так лучше - создадим отдельный класс */
.specialfont {
  font-family: sans-serif;
}

```

## 0.5 На ФЭНДОМе

На ФЭНДОМе используется следующая связка шрифтов для обычного текста:

```
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

```

На будущее — её можно использовать как дополнение к какому-то своему шрифту и если что-то пойдёт не так с нашим шрифтом — всё будет работать как "обычно".

## 1. Web-безопасные шрифты

Web-безопасные шрифты — условная группа шрифтов, которые можно использовать на web-сайтах и почти у всех они будут работать. На ФЭНДОМе их обычно используют в качестве оформления всего текста (или как минимум для подстраховки), для глобальных профайлов (так как туда просто не импортировать свой шрифт) и если просто не хочется подгружать что-то извне.

### Семейства шрифтов

Всего их 5 штук:

* Serif (с засечками)
* Sans-serif (без засечек)
* Monospace (моноширинный, с одинаковой шириной символов)
* Cursive (курсивные)
* Fantasy (декоративные)

Их стоит использовать как подстраховку (условно говоря, если все другие шрифты не сработают, то уж эти должны). Из них нас интересуют только первые три семейства (причём monospace пригодится разве что для выделения кусков кода).

### Что-то более конкретное

Шрифтов, которые поддерживали бы все системы, может быть и нет совсем. Тем не менее, есть несколько шрифтов, которые стремятся к 100% поддержки: Arial, Trebuchet MS, Tahoma, Times New Roman, Palatino, и т.д. Точный список дать трудно, поэтому можно попробовать посмотреть совместимость шрифтов (например на cssfontstack и w3schools).

### Добавляем системных шрифтов

Интересным (и весьма популярным) способом задать шрифт является использование системных шрифтов:

```
.safefonts {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

```

Строчки выше охватывают сразу большую группу операционных систем (MacOS, Windows, Ubuntu, даже Android). Такой подход используют некоторые крупные сайты, так что метод весьма хороший. Для чего именно делать подстраховку — вопрос открытый. Для Windows'a точно лишним не будет; если у вас есть права администратора (а они должны быть, раз дизайном занялись), то изучите аналитику и используемые ОС.

## 2. Выбор шрифта

Прежде всего нужно дать ответы на несколько вопросов:

* Вам нужен шрифт для заголовков/шаблонов/текста на всей вики?
* Какова тематика проекта и есть ли у него свой фирменный стиль?

В зависимости от ответа на эти вопросы как раз и нужно выбрать указанный шрифт. В общем случае стоит "прочувствовать", что подходит лучше. Для чего-нибудь старинного вполне подойдёт шрифт с засечками, для "современного" — без них. В случае чего-то необычного — подойдёт какой-нибудь декоративный шрифт. А если что-то связанное с тематикой программирования или около того — моноширинный шрифт будет хорошим выбором.

## 2.5. Где посмотреть шрифт?

В общем случае есть один и вполне достаточный источник — **Google Fonts**. Он хорошо интегрируется, шрифты бесплатны, отличается простотой и неплохой коллекцией.

## 3. Подключение

Практически всё необходимое находится на странице **справки относительно Google Fonts**. Единственное — на данный момент немного изменился дизайн и интерфейс, но принцип работы всё тот же.

## 4. Альтернативы

Тем не менее, можно воспользоваться и другими сайтами и даже загрузить файл шрифта на вики для дальнейшего использования. В этом нам поможет следующий код:

```
@font-face {
    font-family: '*name*';
    src: url('*link*');
}

```

Где `*name*` и `*link*` — название шрифта (какое захотите) и ссылка на него.

## 5. Небольшое заключение

Такие дела. Хороший шрифт может помочь при оформлении, в то время как плохой шрифт — наоборот, всё испортить. Поэтому старайтесь использовать свои шрифты для отдельных элементов, но не для изменения всего текста.