0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<h2>Ответы</h2>
1
<h2>Ответы</h2>
2
<p>Для подключения шрифтов в CSS используется конструкция<strong>@font-face</strong>. Рассмотрим пошагово, как ей воспользоваться.</p>
2
<p>Для подключения шрифтов в CSS используется конструкция<strong>@font-face</strong>. Рассмотрим пошагово, как ей воспользоваться.</p>
3
<p>В первую очередь необходимо загрузить шрифты и поместить их в отдельную директорию внутри своего проекта. Пусть в нашем примере это будет директория<em>project/fonts/</em>:</p>
3
<p>В первую очередь необходимо загрузить шрифты и поместить их в отдельную директорию внутри своего проекта. Пусть в нашем примере это будет директория<em>project/fonts/</em>:</p>
4
<p>project/ ├── css/ │ └── style.css ├── fonts/ │ │── Roboto-Regular.ttf │ └── Roboto-Bold.ttf</p>
4
<p>project/ ├── css/ │ └── style.css ├── fonts/ │ │── Roboto-Regular.ttf │ └── Roboto-Bold.ttf</p>
5
<p>Далее заходим в наш CSS-файл<em>style.css</em>и прописываем конструкцию<strong>@font-face</strong>. Хорошим тоном является использование данной конструкции<strong>в самом начале CSS-файла</strong>. Конструкция<strong>@font-face</strong>принимает внутри себя<strong>2 основных свойства</strong>, прописав которые мы и подключим необходимый нам шрифт:</p>
5
<p>Далее заходим в наш CSS-файл<em>style.css</em>и прописываем конструкцию<strong>@font-face</strong>. Хорошим тоном является использование данной конструкции<strong>в самом начале CSS-файла</strong>. Конструкция<strong>@font-face</strong>принимает внутри себя<strong>2 основных свойства</strong>, прописав которые мы и подключим необходимый нам шрифт:</p>
6
<ul><li><strong>font-family</strong>- имя подключаемого шрифта, по которому в дальнейшем можно будет обращаться к шрифту внутри нашего CSS-файла</li>
6
<ul><li><strong>font-family</strong>- имя подключаемого шрифта, по которому в дальнейшем можно будет обращаться к шрифту внутри нашего CSS-файла</li>
7
<li><strong>src</strong>- путь к файлу со шрифтом</li>
7
<li><strong>src</strong>- путь к файлу со шрифтом</li>
8
</ul><p>@font-face { font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); }</p>
8
</ul><p>@font-face { font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); }</p>
9
<p>Подключим другое начертание выбранного нами шрифта:</p>
9
<p>Подключим другое начертание выбранного нами шрифта:</p>
10
<p>@font-face { font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); } @font-face { font-family: "Roboto Bold"; src: url("../fonts/Roboto-Bold.ttf"); }</p>
10
<p>@font-face { font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); } @font-face { font-family: "Roboto Bold"; src: url("../fonts/Roboto-Bold.ttf"); }</p>
11
<p>Теперь можно пользоваться данными шрифтами в CSS-файле</p>
11
<p>Теперь можно пользоваться данными шрифтами в CSS-файле</p>