Ссылка на таблицу стилей fonts.googleapis.com иногда не удается загрузить или она повреждена - PullRequest
0 голосов
/ 20 апреля 2020

Мой проект был запущен с помощью Vue CLI + Vuetify новых шаблонов проектов. Это стандартный оператор загрузки шрифтов в индексе. html:

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> 

99% времени у моих пользователей не возникает проблем, но в настольном сафари (новейшая версия) иногда шрифты не загружаются и пользователи видят разные шрифты. Ситуация не может быть исправлена, пока пользователь полностью не очистит все данные сайта для моего сайта, используя «управление данными сайта». Я не смог найти никаких сообщений об ошибках в консоли, и везде, где я могу думать, чтобы посмотреть (вкладки исходники / сеть в настройках Safari Dev) все выглядит нормально. Только однажды смог воспроизвести это странное состояние на моей машине разработчика.

Есть идеи?

1 Ответ

0 голосов
/ 21 апреля 2020

Я предлагаю использовать font-display swap для вашего случая. Поскольку вы будете испытывать медленное время загрузки, как указано в уведомлении о шрифте для встраивания Google Font.

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">

Период замены шрифта

Если лицо шрифта не загружено, любой элемент, пытающийся его использовать, должен отображать запасное лицо шрифта. Если шрифт успешно загружается в течение этого периода, он используется нормально.

...