Мы имеем дело с ограничениями каждый день. Они есть у всего, от наших компьютеров до автомобилей, даже у нас самих. Цель состоит в том, чтобы принять их, попросить о помощи, когда мы в ней нуждаемся, и адаптироваться. Обнаружив еще одно прекрасное ограничение любимого языка «CSS», мне пришлось адаптироваться, то есть учиться.

Будучи студентом программы разработки программного обеспечения Flatiron School, я многому учусь за короткий промежуток времени. Мы заканчиваем наш второй этап, который был сосредоточен на React, библиотеке JavaScript, используемой для создания пользовательских интерфейсов. Закрывая эту главу в нашем путешествии, мы создаем собственные веб-приложения. После создания базовой функциональности мы подошли к моменту, когда необходимо было начать делать вещи красивыми, то есть начать программировать (одну из) ужасных головных болей веб-разработки, CSS.

CSS заслуживает большего количества инструкций, чем я могу сосчитать. Это будет посвящено тому, в чем я немного зануда — важности шрифтов (и тому, как не хватает CSS в этом отделе)! В CSS есть ряд предварительно загруженных шрифтов для использования в вашем веб-приложении, но в нем нет особенно забавных или китчевых, таких как шрифт в западной тематике. Тема нашего проекта/веб-приложения очень похожа на Mortal Kombat, поэтому шрифт с соответствующей тематикой имел решающее значение.

Как и все остальное, шрифты имеют свой собственный тип файла. На самом деле, это может быть несколько разных типов файлов. Некоторые из них предназначены для определенных веб-браузеров, некоторые только для настольного использования. Много раз вы будете видеть типы «TTF», особенно в вашей локальной системе. Но обратите внимание, что многие веб-браузеры используют «WOFF» или «WOFF2». Таким образом, если мы загружаем TTF, нам, вероятно, потребуется изменить его на «WOFF/WOFF2», чтобы использовать его для нашего веб-приложения.

Шрифт Mortal Kombat TTF приобретен на DaFont.com

К счастью, здесь уже были люди, нуждающиеся в определенном шрифте, который не встроен в CSS. Итак, вот что вам нужно сделать, чтобы добавить свой шрифт:

1) Определите, какой шрифт вы хотите использовать, и загрузите его на свой компьютер.

2) Если файл шрифта заканчивается на TTF, нам нужно преобразовать его в тип файла, распознаваемый большинством веб-браузеров, например «WOFF». (FontSquirrel сделает это, как показано ниже)

Веб-генератор FontSquirrel

3) Когда у вас есть правильно отформатированный файл шрифта, перейдите к таблице стилей css вашего кода.

4) Убедитесь, что таблица стилей css связана с вашим приложением. У нас есть пара вариантов. Наш шрифт можно хранить и получать к нему доступ локально или отправлять на любой сервер, который мы используем для размещения нашего приложения. Я установил свой локально, создав папку в моей папке «./src», где живет весь мой код и таблица стилей css.

Расположение шрифтов
Расположение шрифтов

5) Далее нам нужно добавить некоторые инструкции в нашу таблицу стилей css. Мы будем использовать этот общий формат:

Шаблон таблицы стилей
Шаблон таблицы стилей

обратите внимание: назовите шрифт, который вы добавляете, где этот шаблон говорит «FontName», но убедитесь, что это строчные буквы.

Вот пример моего кода со шрифтом Mortal Kombat:
Добавление шрифта Mortal Kombat в мою таблицу стилей

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

Описание изображения

Этот процесс прост и добавляет изюминку вашим веб-приложениям.

Шрифт установлен!