Веб-шрифты Google не загружаются в Chrome для iOS

Когда я использую веб-шрифты Google, они нормально загружаются во всех браузерах, которые мне нужны, КРОМЕ Chrome/iOS. Это кажется странным, так как он отлично работает в Chrome для Mac и Safari для iOS, поэтому я не думаю, что это проблема iOS или проблема Google Chrome. Кажется, это специфично для Chrome/iOS.

Любые идеи или идеи о том, КАК устранить эту проблему, были бы замечательными!

Спасибо!

ИЗМЕНИТЬ

Я использую веб-шрифты Google, размещенные в Google, со следующим:

<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" />

В моем шрифте (SASS) я использую следующее:

h1
  font-family: "Leckerli One", cursive

ios google-chrome css responsive-design google-webfonts
person andrewpthorp    schedule 09.12.2012    source источник
comment
Как используются веб-шрифты Google — удаленно размещенные в Google или на вашем собственном сервере? (Это часто имеет значение.) Какие шрифты? Какой точный код вы используете?   -  person Jukka K. Korpela    schedule 10.12.2012
comment
Пробовали ли вы загрузить шрифт, разместить его самостоятельно и посмотреть, отображается ли он потом? Может стоит попробовать.   -  person Billy Moat    schedule 17.12.2012
comment
Андрей, у вас есть ссылка на ваш сайт? В настоящее время я использую веб-шрифты Google на своем сайте, и они работают в Chrome на iOS. Я также протестировал этот шрифт, и он работает: djfarrelly.com/test   -  person djfarrelly    schedule 20.12.2012
comment
Я подтверждаю, что этот шрифт корректно работает даже в Chrome для iOS (все последние версии). Протестировал все от и до. Похоже, проблема в вашем коде (или в SASS). Можете ли вы показать мне/нам свой веб-сайт, чтобы я мог вручную проанализировать его код и найти проблему?   -  person Alex G    schedule 23.12.2012
comment
Когда вы открываете консоль инструментов разработчика. Если возникает что-то вроде ошибки синтаксического анализа OTS, поздравляем, вот решение github .com/googlei18n/sfntly/issues/52 github.com/googlei18n/sfntly/ тянуть/54   -  person Le Ding    schedule 02.05.2017

Ответы (7)


arrow_upward
9
arrow_downward

Я вижу ту же проблему. Размещение файлов шрифтов на моем собственном сервере и переписывание правил @font-face, чтобы они соответствовали, решили проблему для меня, как с моим локальным сервером разработки, так и в prod.

я не знаю причины; я бы предположил, что проблема с одним и тем же источником, которая по-разному применяется в UIWebViews (iOS Chrome является UIWebView из-за правил App Store).

person Dave    schedule 18.12.2012
comment
ответы должны действительно отвечать на вопрос, если это не так, и вы хотите что-то сказать, пожалуйста, в комментарии (это можно сделать, если у вас репутация 50) - person Wouter J; 18.12.2012
comment
Я решил проблему и ответил на его первоначальный вопрос. Если бы я не ответил на его глубокое теоретическое продолжение, я бы ожидал, что не получу награду, и все будет в мире по справедливости. - person Dave; 18.12.2012

arrow_upward
4
arrow_downward

Устройства IOS используют только форматы TTF (или OTF, если они следуют приведенным ниже рекомендациям для разработчиков). Этот шрифт обслуживается как WOFF, EOT и OTF (предположительно, не в соответствии с рекомендациями). Есть некоторые сервисы, которые предоставят вам другие версии. Попробуйте указать шрифт с помощью @font-face и посмотрите, решит ли это проблему! У Fontsquirrel есть генератор @font-face, который выполняет тяжелую работу.

Что касается следующего вопроса. Есть некоторая документация для разработчиков от Apple по реализации шрифтов TrueType. Его можно найти здесь. По сути, форматы TTF хранят шрифт как ресурсы sfnt. Единственный другой формат шрифта, который может сделать это, — это оболочка sfnt таблицы смещения OpenType. Поскольку IOS читает шрифты с помощью оболочек sfnt, вы столкнетесь с проблемами со шрифтами, которые не хранятся таким образом. (извините за весь жаргонизм).

person Matthew R.    schedule 19.12.2012
comment
Не мой опыт: по крайней мере, в iOS6 шрифты WOFF работали нормально (в Safari и в Chrome после того, как я обслуживал их со своего собственного сервера). Смотрите мой ответ на этот вопрос. - person Dave; 27.12.2012

arrow_upward
4
arrow_downward

Вы можете использовать загрузчик Google Fonts API, который обнаружит браузер пользователя и отправит его соответствующим образом. отформатированный CSS.

Пример кода доступен в первом ответе на этот вопрос о переполнении стека.

Это позволит использовать как Safari, так и Chrome (и другие UIWebView) для правильного отображения шрифта.

Примечание: если вы хотите хранить шрифты локально, как предложил @Dave, этот CSS должен работай.

person Aaron Brager    schedule 21.12.2012

arrow_upward
2
arrow_downward

В CSS вы можете использовать

!important

Пример:

@font-face {
  font-family: 'Monda' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important;
}
person Enve    schedule 09.12.2012
comment
Пожалуйста, уточните, поскольку ваш ответ вообще не имеет смысла. - person Marko; 10.12.2012
comment
Он предполагает, что экземпляр CSS здесь перезаписывается дальше в таблице стилей (отсюда: CSS-Cascading Style Sheet), поэтому вам может потребоваться использовать !important, чтобы переопределить это; однако я не верю, что это ваша проблема. - person tim.baker; 22.12.2012

arrow_upward
0
arrow_downward

Если кто-то все еще видит эту проблему — шрифт не загружается в Chrome на iOS 9 или более ранней версии — дважды проверьте, что шрифт импортирован как файл css, а не как файл js. Fonts.com даст вам возможность импортировать шрифты как js, которые не будут подхватываться в Chrome / iOS 9 или ниже. Изменение моего импорта на css исправило это для меня.

person mixophrygian    schedule 01.12.2016

arrow_upward
0
arrow_downward

Для меня работает добавление на php-страницу:

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Trocchi');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
</style>
person Max    schedule 13.05.2017

arrow_upward
0
arrow_downward

В последнее время у меня похожая проблема с UIWebView. Я внес дополнительные изменения как в приложение для iOS, так и в веб-источник, ничего не помогло.

Наконец, исправил это, просто изменив ссылку Google Font на https.

person cyborg86pl    schedule 12.05.2018