Как применить rel=preload к адресу внутри CSS файла?

Question

EvgenyApMr @EvgenyApMr

CSS

Как применить rel=preload к адресу внутри CSS файла?

Всем привет!)

Сейчас на сайте шрифты FontAwesome располагаются локально и подключены через CSS

@font-face {
  font-family: 'FontAwesome';
  src: url("../../../assets/fonts/fontawesome-webfont.eot?v=4.7.0");
  font-weight: normal;
  font-style: normal; }

Подскажите, как внутри CSS применить атрибут preload для предварительной загрузки шрифтов? Чтобы был эквивалент, например, такой строки:

<link rel="preload" href="/assets/fonts/fontawesome-webfont.eot?v=4.7.0" as="font">

Вопрос задан более трёх лет назад
961 просмотр

11 комментариев

Подписаться 1 Простой 11 комментариев

Павел Атайкин @pavel_ataykin

В чём вопрос то? :) Ты же всё правильно написал. Для каждого шрифта добавляешь строку с preload, как у тебя написано :) Тогда браузер их загрузит заранее

Написано более трёх лет назад
Арсений Матыцин @ArsenyMatytsyn Куратор тега CSS

Павел Атайкин, нередкий случай прямого ответа в вопросе.

Написано более трёх лет назад
EvgenyApMr @EvgenyApMr Автор вопроса

Павел Атайкин, первый вариант - фрагмент инструкции из CSS-файла, второй - ссылка, встраиваемая в HTML.
Во втором варианте используется preload. Мне нужно добавить preload (или аналог) в CSS

Написано более трёх лет назад
Павел Атайкин @pavel_ataykin
EvgenyApMr, Приём, Приём :) Добавлю пример

<head> <link rel="stylesheet" href="/css/fonts.css"> // Файл в котором описаны font-face <link rel="preload" as="font" href="/fonts/Roboto/Roboto-Bold.woff2"> </head>

Так должно быть понятнее ;)
Когда бразуер загрузит fonts.css и полезет загружать шрифт fontName, он обнаружен, что уже его загрузил и возьмёт готовенький.
Написано более трёх лет назад
EvgenyApMr @EvgenyApMr Автор вопроса

Арсений Матыцин, так это же 2 разных варианта написания. Мне нужно применить возможности второго в первом. Это вообще возможно?

Написано более трёх лет назад

EvgenyApMr @EvgenyApMr Автор вопроса

Чтобы было, например, так:

@font-face {
  font-family: 'FontAwesome';
  src: url("../../../assets/fonts/fontawesome-webfont.eot?v=4.7.0");
  font-weight: normal;
  font-style: normal; 
  rel: preload;
}

Написано более трёх лет назад

Павел Атайкин @pavel_ataykin

EvgenyApMr, Нет :) link rel="preload" - это тег. Он описывается только в html и только в head. Он говорит браузеру какие ресурсы нужно загружать сразу, потому что они важные и нужны как можно скорее.

Написано более трёх лет назад
EvgenyApMr @EvgenyApMr Автор вопроса

Павел Атайкин, можно просто в HTML закинуть несколько строк с preload без корректировки CSS? Все правильно понял?)

Написано более трёх лет назад
Павел Атайкин @pavel_ataykin

EvgenyApMr, Так точно!

Написано более трёх лет назад
EvgenyApMr @EvgenyApMr Автор вопроса

Павел Атайкин, Спасибо за помощь)

Написано более трёх лет назад
Павел Атайкин @pavel_ataykin

Павел Атайкин, Там тебе куратор тега очень подробно ответил(и правильно). Пометь его ответ Верным, пожалуйста :)

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 46 минут назад
- 12 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 194 просмотра
2

ответа
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 109 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 111 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 80 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 101 просмотр
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 89 просмотров
2

ответа
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 нояб.
- 61 просмотр
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

move2usajobs LLC • Лос-Анджелес

от 2 000 до 4 000 $

Текст из фотографии в отдельный файл

26 нояб. 2024, в 04:41

1500 руб./за проект

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

15000 руб./за проект

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

50000 руб./за проект

В чём вопрос то? :) Ты же всё правильно написал. Для каждого шрифта добавляешь строку с preload, как у тебя написано :) Тогда браузер их загрузит заранее
Павел Атайкин, нередкий случай прямого ответа в вопросе.
Павел Атайкин, первый вариант - фрагмент инструкции из CSS-файла, второй - ссылка, встраиваемая в HTML.
Во втором варианте используется preload. Мне нужно добавить preload (или аналог) в CSS
EvgenyApMr, Приём, Приём :) Добавлю пример

<head> <link rel="stylesheet" href="/css/fonts.css"> // Файл в котором описаны font-face <link rel="preload" as="font" href="/fonts/Roboto/Roboto-Bold.woff2"> </head>

Так должно быть понятнее ;)
Когда бразуер загрузит fonts.css и полезет загружать шрифт fontName, он обнаружен, что уже его загрузил и возьмёт готовенький.
Арсений Матыцин, так это же 2 разных варианта написания. Мне нужно применить возможности второго в первом. Это вообще возможно?
Чтобы было, например, так:

@font-face { font-family: 'FontAwesome'; src: url("../../../assets/fonts/fontawesome-webfont.eot?v=4.7.0"); font-weight: normal; font-style: normal; rel: preload; }
EvgenyApMr, Нет :) link rel="preload" - это тег. Он описывается только в html и только в head. Он говорит браузеру какие ресурсы нужно загружать сразу, потому что они важные и нужны как можно скорее.
Павел Атайкин, можно просто в HTML закинуть несколько строк с preload без корректировки CSS? Все правильно понял?)
Павел Атайкин, Спасибо за помощь)
Павел Атайкин, Там тебе куратор тега очень подробно ответил(и правильно). Пометь его ответ Верным, пожалуйста :)

Answer 1 · 2020-05-21 20:29:03

Font-face — правило.
Link preload — запрос на предзагрузку ресурса для правила.

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

Как применить rel=preload к адресу внутри CSS файла?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт