Добрый день! <br/> <br/> <b>Задание:</b> Вам необходимо стилизовать текст. <br/> <b>Процесс реализации:</b> <br/> 1. Скачайте архив с исходными файлами задания – скачано. <br/> 2. Установите шрифт Lobster-Regular.ttf на вашу операционную систему – установлен. <br/> 3. Измерьте в макете и установите размер текста для элемента с классом container. <br/> 4. Измерьте в макете и установите цвет текста для элемента с классом container. <br/> 5. Измерьте в макете и установите междустрочное расстояние для элемента p. <br/> 6. Подключите шрифт lobster, используя директиву @font-face. В качестве пути (src) укажите ссылку на файл, а также задайте настройки font-family: lobster, font-weight: 400 и font-style: normal. <br/> 7. Установите font-family: lobster для элемента с классом container. <br/> 8. Убедитесь, что конечный результат соответствует описанию. Для этого переключитесь в режим FullPage (скриншот). Если в режиме FullPage View возникла ошибка, подтвердите свою учетную запись в CodePen, перейдя по ссылке из письма от CodePen, чтобы всё заработало правильно. <br/> 9. Не вносите других изменений в CSS и не добавляйте дополнительные правила, кроме предусмотренных заданием. <br/> <br/> <b>Мое выполнение задания:</b> <br/> <br/> @font-face { <br/> font-family: "Lobster-Regular.ttf", sans-serif; <br/> src: url('<a href="https://netology-code.github.io/html-2-homeworks/flex-elements-positioning/font-face/fonts/lobster-regular.woff" rel="nofollow">https://netology-code.github.io/html-2-homeworks/f...</a>'); <br/> font-weight: 400; <br/> font-style: normal; <br/> } <br/> <br/> .container { <br/> font-family: "lobster", sans-serif; <br/> color: #ffffff; <br/> font-size: 40px; <br/> line-height: 56px; <br/> } <br/>
В вашем коде есть несколько моментов, которые могут привести к тому, что шрифт не загружается корректно. Давайте рассмотрим их:
1. **Не совсем корректное указание `font-family`:**
В директиве `@font-face` вы указали `font-family: "Lobster-Regular.ttf", sans-serif;`. Здесь вам нужно только указать название шрифта и не добавлять расширение файла или другие значения. Неправильный вариант может повлиять на то, как браузер обрабатывает шрифт. Правильный вариант:
```css
@font-face {
font-family: "Lobster";
src: url('https://netology-code.github.io/html-2-homeworks/flex-elements-positioning/font-face/fonts/lobster-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
```
2. **Путь к шрифту:**
Убедитесь, что URL-адрес шрифта действителен и доступен. Вы можете проверить это, вставив URL в адресную строку браузера. Если файл не доступен, шрифт не будет загружен.
3. **Отсутствие указания формата:**
В директиве `@font-face` желательно указывать формат шрифта, чтобы браузеры могли правильно его интерпретировать. Например:
```css
src: url('...') format('woff');
```
4. **Проверка на наличие ошибок в консоли:**
Откройте инструменты разработчика в браузере (обычно это F12) и проверьте консоль на наличие сообщений об ошибках, связанных с загрузкой шрифта.
5. **Кэширование:**
Иногда браузеры кэшируют старые версии файлов. Попробуйте очистить кэш или запустить в режиме инкогнито.
После внесения этих изменений, ваш CSS-код должен выглядеть так:
```css
@font-face {
font-family: "Lobster";
src: url('https://netology-code.github.io/html-2-homeworks/flex-elements-positioning/font-face/fonts/lobster-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
.container {
font-family: "Lobster", sans-serif;
color: #ffffff;
font-size: 40px;
line-height: 56px;
}
```
Запустите код еще раз после этих изменений, и шрифт должен загружаться корректно.
То есть вас не смущает что "Lobster-Regular.ttf" это не "lobster"? <br/> Исправте согласно <a href="https://developer.mozilla.org/ru/docs/Web/CSS/@font-face" rel="nofollow">документации</a> .