Подключение шрифтов в CSS

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

/* Обычный */
@font-face {
	font-family: 'FontName'; 
	src: url(/fonts/font.ttf); 
}

/* Жирный */
@font-face {
	font-family: 'FontName bold'; 
	src: url(/fonts/font-bold.ttf); 
}

.text-1 {
	font-family: 'FontName'; 
	font-size: 20px;
}

.text-2 {
	font-family: 'FontName bold'; 
	font-size: 20px;
}
CSS

Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:

  • Нет названия шрифта в свойстве local.
  • Подключен только один формат шрифта.
  • Неправильно настроены начертания.
14.02.2020, обновлено 17.01.2021
33025
Предыдущая запись Работа с JSON в PHP
Следующая запись Стилизация Checkbox

Комментарии 2

ogabek modaminov ogabek modaminov
20 июня 2020 в 19:06
0
было очень полезно, спасибо)
Makle Makle Makle Makle
22 февраля 2021 в 21:23
0
Четко, понятно, вполне подробно. Спасибо.

, чтобы добавить комментарий.

Другие публикации

Сброс стилей (CSS reset)
Цель сброса стилей состоит в том, чтобы уменьшить разность отступов, размеров шрифтов заголовков и т.д. заданных по умолчанию в разных браузерах.
14876
+1
Буквица CSS
Буквица, или инициал – первая буква главы или раздела, выделяется цветом и шрифтом. В CSS есть несколько способов задать стили первой букве...
2153
+1
Расстояние между буквами, строками, ширина табуляции в CSS
Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.
3849
0
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
13757
+2
Ускорение загрузки изображений и скриптов
Современные браузеры имеют поддержку предварительной загрузки ресурсов, указав в head страницы теги link с их адресами...
6809
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
13446
+17