КОДЕКС

Разбираемся со шрифтами

При подготовке к проекту JavaScript мне показали удивительный мир веб-шрифтов Google!

Обожаю типографику!

Я потратил некоторое время на изучение, прежде чем сузил круг вариантов. Но когда пришло время реализовать это в файле CSS, все пошло не так гладко.

Возможно, я выбрал один из немногих шрифтов, который просто не подойдет в этом сценарии. Может, я что-то упускаю.

Поскольку в то время это было для меня в новинку, и у меня не хватало времени, чтобы уложиться в срок, я решил просто придерживаться Apple Chancery и Georgia и продолжить работу над проектом.

Списки безопасных веб-шрифтов



Безопасные веб-шрифты CSS
В следующем списке представлены лучшие веб-безопасные шрифты для HTML и CSS: Arial (без засечек), Verdana (без засечек), Helvetica… www.w3schools.com





Стек шрифтов CSS: безопасные для Интернета и семейство веб-шрифтов с кодом HTML и CSS.
Безопасные для Интернета шрифты - это шрифты, предустановленные во многих операционных системах. Хотя не во всех системах используются одинаковые шрифты… www.cssfontstack.com



Больше шрифтов



CSS: шрифты
См. Также указатель всех советов. На этой странице: после цвета, шрифт, вероятно, является самым основным свойством страницы… www.w3.org



Что ж, это не может продолжаться вечно, поэтому я собираюсь разобраться в этом прямо здесь, прямо сейчас.

Веб-шрифты Google



Google Fonts
Делаем Интернет более красивым, быстрым и открытым с помощью отличной типографики fonts.google.com



Существуют шрифты, на которые вы можете приобрести лицензию, но шрифты Google бесплатны и имеют открытый исходный код. Ура!

На момент написания этой статьи на выбор было 1043 семейства шрифтов.

Сузьте выбор по категориям (Serif, Sans Serif, Display, Handwriting, Monospace), языку и свойствам шрифта (количество стилей, толщина, наклон, ширина).

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

Выберите шрифт (ы)

Найдите шрифт и выберите его. Вы попадете на новую страницу, где сможете просмотреть несколько стилей (если их больше одного) и глифов.

Для каждого желаемого стиля выберите «+ Выбрать этот стиль».

ПРИМЕЧАНИЕ. Если вы хотите использовать несколько семейств / стилей шрифтов Google, просто продолжайте добавлять их перед экспортом ссылки. В конце все шрифты будут собраны в 1 удобную ссылку.

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

Ссылка для встраивания шрифта

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

Скопируйте весь тег ссылки и вставьте его в тег ‹head› своего html-файла.

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

Так что, черт возьми, легко. Не знаю, где я ошибся в прошлый раз.

Я мог бы выбрать кнопку «Загрузить семейство», которая находится прямо под квадратной кнопкой с красной точкой, и она дает вам файл .ttf (шрифт True Type) для включения в каталог вашего проекта. Может быть, я исследую это в другой раз.