@font-face объявления не работают в интернет-браузере Android 4.3?

Мой телефон Samsung Galaxy S3 недавно обновился с Android 4.1.3 до Android 4.3. Теперь несколько сайтов, которые я разработал, которые я тестировал в Android-браузере Android, не отображают шрифты, которые я объявил с помощью @font-face. Что мне нужно сделать, чтобы исправить это?

Один из сайтов (версия для разработки): http://beta.kdfansite.com

Вот некоторые из связанных CSS для Open Sans:

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot');
    src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.woff') format('woff'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ... */

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    /* ... */
}

Каждый шрифт, который я использую на сайте, объявляется аналогичным образом. Объявление Great Vibes (также в custom.css) для сообщения "наслаждайся ездой" - это еще одно сравнение. Все шрифты отображаются в Chrome для Android и Firefox для Android на одном устройстве, но не в Android-Интернете.

Мне нужно как можно скорее завершить этот CSS, и я работаю над этим проектом в качестве добровольца (не оплачивается). Поэтому я ищу быстрое исправление, а не обзор кода. Я также дизайнер UX, а не веб-разработчик. Спасибо заранее.

Изменить: Я сделал некоторую дополнительную отладку сегодня в Edge Inspect CC и weinre, подключив как мой Android-телефон, так и свой iPad к моему ноутбуку. В Weinre я могу изменить семейства шрифтов на iPad, но не на телефоне. Я могу изменить цвета шрифтов на обоих устройствах. Таким образом, основная проблема связана с тем фактом, что я не могу изменить шрифты по умолчанию, когда я использую удаленный отладчик.

ОТВЕТЫ

Ответ 1

У меня такая же проблема, как я ее решаю.

Я использую только svg на мобильных устройствах со средствами массовой информации.

@media only screen and (max-width: 320px) {
@font-face {
    font-family: 'open_sansbold';
    src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }

}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

Надеюсь, он вам поможет.

Ответ 2

Мы столкнулись с подобной проблемой, и это было вызвано использованием text-rendering: optimizeLegibility - удаления этого из нашего CSS, чтобы наши шрифты снова начали работать с 4.3.

Ответ 3

Я создаю jsfiddle только с svg и woff шрифтами и тестирую его на своем устройстве Android 4.3 в браузере по умолчанию. Все работает.

Я просто удалю все ненужные шрифты для мобильных устройств. Все мобильные поддерживают svg шрифты, FF и IE10 нужны woff. Таким образом, вы можете использовать медиа-запросы для отдельного ограничения шрифта: для мобильных и для рабочего стола.

Если вам нужны все типы шрифтов, проверьте заголовок Content-Type для файлов шрифтов, это всегда text/plain, что неверно:

  • eot имеет тип приложения /vnd.ms-fontobject
  • otf и ttf имеют тип приложения/октета-потока
  • woff имеет тип application/font-woff
  • svg имеет тип image/svg + xml

Также проверьте эту страницу, чтобы прочитать известные общие проблемы с font face.

Ответ 4

У меня была аналогичная проблема раньше, и я решил ее, добавив font-weight: normal !important; к элементам/тексту, которые использовали шрифт. Я считаю, что проблема заключалась в том, что вес шрифта был унаследован элементами, и это вызвало потерю шрифта. Надеюсь, он работает:)

Итак, в вашем коде:

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    font-weight: normal !important;
    /* ... */
}

Ответ 5

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

Еще одна идея, возможно, использовать медиа-запрос, предназначенный для веб-браузеров так:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

Ответ 6

Начиная с 2017 года, можно использовать запрос @import, предоставленный fonts.google.com, для нужного шрифта. Просто найдите нужный шрифт (ы), выберите его, затем в миниатюрной строке внизу экрана вам нужно будет выбрать @import в разделе "embed". Я добавил скриншот для справки: https://gyazo.com/f959b6ef973d4b0df467a7a336cc3698

У меня была такая же проблема в мобильном браузере по умолчанию, но после того, как я использовал этот синтаксис, проблема была решена. Не знаю, почему, но это сработало.