Значки материалов и Roboto не загружаются в Safari - только Safari

как вы можете видеть на скриншоте, иконки и шрифт загружаются неправильно.

введите описание изображения здесь

По нашим наблюдениям, это не работает только в Safari. Неважно, тестируем ли мы на iPhone или на Mac.

Шрифты загружаются следующим образом:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Любой другой браузер, который мы тестировали, правильно отображает значки и шрифт. (Браузер Google на iOS; Chrome на Windows)

Из того, что мы видим в отладчике Safari, кажется, что файлы шрифтов не могут быть загружены. (Я не хотел этого писать, но: Иногда я замечал, что он работает в течение короткого времени, а затем перестает работать.)

В Chrome результат выглядит так:

введите описание изображения здесь

Каким будет предложение?

  • Самостоятельный хостинг? Почему?

Обновление 13 ноября 2019 г.: найдена дополнительная информация по адресу: https://github.com/doanythingfordethklok/safari-cache-bug


css safari angular-material google-material-icons roboto
person Daniel    schedule 11.11.2019    source источник
comment
Пробовали ли вы использовать другие семейства шрифтов, чтобы убедиться, что с полезной нагрузкой на стороне Google все в порядке? Попробуйте что-то вроде Lato или Open Sans вместо Roboto   -  person Bryce Howitson    schedule 19.11.2019
comment
Хорошая точка зрения. Протестировал. Это не имеет значения.   -  person Daniel    schedule 19.11.2019
comment
Я полагал, что это был долгий путь, но никогда не знаешь. В прошлом у меня были проблемы с определенными файлами шрифтов от Google.   -  person Bryce Howitson    schedule 19.11.2019
comment
Можно ли самостоятельно разместить шрифт? Это не идеально, но тогда вы можете кодировать шрифт base64 как часть вашего CSS. Это позволит избежать проблемы перенаправления при извлечении ресурсов, которую вы обнаружили.   -  person Bryce Howitson    schedule 19.11.2019
comment
Возможно, проверьте похожий вопрос. Попробуйте поставить font-family: Roboto; в кавычки, если вы этого не сделали?   -  person matthew-e-brown    schedule 19.11.2019
comment
@BryceHowitson Тем временем я попробовал самостоятельно разместиться. Но это не имело никакого эффекта.   -  person Daniel    schedule 19.11.2019
comment
@matthew-e-brown попытался поместить это в кавычки, но безрезультатно.   -  person Daniel    schedule 19.11.2019
comment
Кодирование файла, встроенное в ваш CSS, было той частью, о которой я говорил.   -  person Bryce Howitson    schedule 19.11.2019
comment
Вы пытались указать font-weight и font-style вместе с font-family? Кажется, это работает для многих людей в этом посте   -  person Anis R.    schedule 19.11.2019
comment
@AnisR.пробовал. но это не имело никакого эффекта.   -  person Daniel    schedule 20.11.2019
comment
@Daniel Попробуйте мой ответ, опубликованный ниже.   -  person VSM    schedule 20.11.2019

Ответы (4)


arrow_upward
3
arrow_downward

Похоже, вы столкнулись именно с той ошибкой, с которой обновили свой пост.

Возможно, вы несколько раз перенаправляете пользователя при начальной загрузке приложения? Если это так, то самым безопасным вариантом будет дождаться фактического ввода пользователя, прежде чем запускать какие-либо перенаправления, это также гарантирует, что все было загружено правильно.

Альтернативным подходом было бы дождаться готовности документа с помощью функции document.ready (например, jQuery):

$(document).ready(function() {
    // your code here
});

Вы можете попробовать поместить свой код туда или, в качестве альтернативы, дождаться ввода пользователя, пока не инициируется перенаправление. Лично мне не повезло с подходом document.ready, и я переключился на метод пользовательского ввода.

person Jejuni    schedule 13.11.2019

arrow_upward
1
arrow_downward

Один из приведенных ниже способов может помочь решить эту проблему с загрузкой шрифта в браузере Safari.

Я проверил вышеприведенные исходные коды шрифтов Google и прикрепил сюда два экрана. Обратите внимание, что связан только формат файла шрифта .woff2.

Это экран исходного кода шрифта Google Roboto.

введите здесь описание изображения

Это экран исходного кода шрифта Google Icon.

введите здесь описание изображения

Я обнаружил, что формат .woff2 не полностью поддерживается всеми версиями Safari. Версии Safari ниже 9.1 не поддерживают .woff2, в то время как это частично и полностью поддерживается версиями Safari.

Ниже я прикрепил скрин для справки.

введите здесь описание изображения

  • Красный - не поддерживается.
  • Светло-зеленый — частично поддерживается.
  • Темно-зеленый — полностью поддерживается.

Я думаю, версия Safari вашего устройства находится между 3.1–11.1.

Исправить

Сначала вам нужно загрузить файл шрифта, а затем загрузить и преобразовать этот файл шрифта в форматы .ttf, .eot, .woff, .woff2 с помощью Transfonter. официальный сайт. Пожалуйста, не забудьте проверить форматы файлов, которые вам нужны, прежде чем нажать кнопку «конвертировать».

Как только вы загрузите и распакуете сжатый файл, вы увидите, что есть все преобразованные файлы и таблица стилей css. Сохраните их все вместе и свяжите эту таблицу стилей CSS с вашим приложением.

Надеюсь, это решит вашу проблему.

person VSM    schedule 20.11.2019

arrow_upward
0
arrow_downward

У меня такая же проблема. Для меня он загружался в сафари, браузер просто не перекрашивал/пересчитывал стили после загрузки этого шрифта (в моем случае он загружался из CDN Google).

Что я сделал, так это то, что вместо того, чтобы загружать шрифт в мой index.html с остальной частью пакета, я добавил @import в мой CSS App.vue. Если вы не используете Vue, я думаю, вы можете добавить файл CSS, который импортирует шрифт из CDN вместо того, чтобы иметь его в index.html.

Надеюсь, это поможет кому-то ✌✌

person Jordi Enric    schedule 10.06.2020

arrow_upward
0
arrow_downward

У нас такая же проблема на https://www.flimmo.de, и самостоятельный хостинг не решил проблему. . Но я нашел причину: Блокировщик контента

У меня запущен Firefox Klar. Когда я отключаю его, страница отображается правильно.

Firefox Focus/Klar может блокировать веб-шрифты, которые необходимо отключить в настройках приложения Klar, см. https://github.com/mozilla-mobile/focus-ios/issues/1889

person 0llie    schedule 02.06.2021