Почему я не использую webfont для значков в нижнем колонтитуле, показывая, когда этот сайт просматривается в iOS 6.1.4?Webfont не отображается в iOS
Я попытался удалить анимацию CSS на значки, удалив jQuery на нем. Ничто не дает им показать.
я бы очень признателен за любую помощь в выяснить, почему этот шрифт не отображается.
Пожалуйста, обратите внимание на эту ссылку:
Iconfont/webfont not showing in iPhone safari browser
Проблема в том, что IOS обеспечивает частичную поддержку шрифтов-функция-настройки CSS собственности, но вы можете использовать лигатуры в iOS Safari добавляет рендеринг текста: optimizeLegibility. Следующая ссылка (http://clagnut.com/sandbox/opentype/ligatures) показывает текст с использованием шрифта Magenta с общим & Дискреционные лигатуры ON и другие тексты с общим & Дискреционные лигатуры ВЫКЛ. Если вы получите доступ к этой ссылке с устройства iOS, вы увидите, что оба текста равны. Это означает, что iOS не поддерживает лигатуры только с настройками шрифта , поэтому гифы в вашей типографии не работают на iOS. To заставить работать в iOS, вам придется добавить текстовый рендеринг: optimizeLegibility к вашему CSS. Хорошей ссылкой может быть «Сегодняшний онлайн-текст : прекрасная расцветка лигатуры». Но, вы должны прочитать «Безопасно ли использовать правило CSS»? Текстовый рендеринг: optimizelegability; «на весь текст?».
text-rendering: optimizeLegibility;
Я бы предложил отказаться от веб-шрифтов Google и использовать шрифт css3 @ font-face, поддержка для него достаточно (http://caniuse.com/fontface), и он работает в браузерах iOS и т. Д. Кроме того, есть груды бесплатных веб-шрифтов (не все из них похожи на shite - сделайте немного интенсивного поиска в Google). Не забудьте проверить их лицензии, чтобы убедиться, что у них есть соответствующая лицензия для встраивания на веб-сайт.
Вот демо @ шрифта-слойного CSS:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
затем использовать его на странице
body {
font: bold 1em/1.5em 'MyFontFamily', Arial, Helvetica, Geneva, sans-serif;
}
Тогда вы все готово.
Веб-шрифты Google - это не тот шрифт, с которым у меня возникают проблемы с поддержкой. Это третий пользовательский веб-шрифт, шрифт значка, объявленный в /assets/css/main.css, который не отображается. И это проявляется в каждом настольном браузере. Просто не сафари iOS. – IMUXIxD
Вы можете удалить SVG-формат. Единственная причина, по которой она была добавлена, была до iOS 4.2, Mobile Safari не поддерживала форматы шрифтов TrueType. Начиная с iOS 4.2, он поддерживал TrueType форматированные шрифты. Поскольку это обновление произошло еще в ноябре 2010 года, я сомневаюсь, что существует очень много пользователей, которые используют более старую версию.
Формат других шрифтов использует формат ꜱꜰɴᴛ, который имеет несколько ограничений, которых нет в XML. – user2284570
Я частично воссоздан ваша страница, используя другой шрифт символов и подтвердил ту же функциональность ошибки на IOS.Я был в состоянии получить шрифт символов для визуализации на IOS делает это изменение:
<li><a class="" href="#">Mail</a></li>
изменения в
<li><a class="ss-mail" href="#"></a></li>
Я использую symbolset, потому что у меня уже есть копии всех файлов шрифтов, но функциональная ошибка была аналогичной. В случае набора символов, используя вашу строку кода, на самом деле было показано слово «Почта», где символ должен находиться на iOS, а шрифт символа правильно отображался на настольных браузерах. Когда я переключил код для использования имени класса, символ работает на iOS.
a link to my example с символьным шрифтом, работающим на iOS (примечание: я не тратил время, чтобы сделать все остальные шрифты и работу javascript).
Возможно, у вашего шрифта есть аналогичная проблема с отображением символов на iOS. Если есть альтернативный способ применения шрифта, с помощью класса CSS, подобного набору символов, вы можете попробовать это и посмотреть, получите ли вы те же результаты. Если нет, вы всегда можете использовать набор символов или другой шрифт символов.
Я думаю, что «реальный» ответ на это: (., Когда вы проверяете его на устройстве) ваш глифов шрифта 404'ing на вашем веб-сервере
В вашем CSS, у вас есть»../ fonts/glyphs.eot ', который составляет: http://irfandesign.com/fonts/glyphs.eot (и составляет 404 дюйма).
Глядя на код, я не вижу объявленного шрифта. Пожалуйста, разместите CSS, который вы используете ... – Xarcell
Он использует веб-шрифты google ... –
@ Xarcell Это main.css. Шрифт значка - это третий шрифт, который объявлен: http://irfandesign.com/dev/assets/css/main.css – IMUXIxD