Сколько шрифтов у вас есть?

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

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

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

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

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

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

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

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

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


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

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


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

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

Вот пример моего кода со шрифтом Mortal Kombat:

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

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

Оцените статью
devanswers.ru
Добавить комментарий