Как применить 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">

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

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

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

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

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

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

Войти через центр авторизации

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

CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 15 часов назад
- 88 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 18 часов назад
- 105 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 77 просмотров
0

ответов
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
CSS

Простой
Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?
- 4 подписчика
- вчера
- 1080 просмотров
2

ответа
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- 30 апр.
- 45 просмотров
0

ответов
CSS

Простой
Как применить свойство к псевдоэлементу?
- 3 подписчика
- 29 апр.
- 231 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему не срабатывает анимация при исчезновение?
- 1 подписчик
- 28 апр.
- 49 просмотров
1

ответ
HTML

+1 ещё

Средний
Как зафиксировать данные блоки, чтобы не было разрывов?
- 1 подписчик
- 28 апр.
- 71 просмотр
1

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

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

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Разработать нейросеть

02 мая 2024, в 06:11

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

Автоматизация отчетности сектора подбора и развития персонала в 1С

02 мая 2024, в 05:49

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

Изменение темы сайта на ghost cms

02 мая 2024, в 04:47

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

В чём вопрос то? :) Ты же всё правильно написал. Для каждого шрифта добавляешь строку с 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 файла?

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

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

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