В настоящее время я создаю одностраничное веб-приложение VueJS и самостоятельно размещаю значки материалов в соответствии с этой публикацией SO . Я использую webpack v3.6 для объединения своих активов и "prerender-spa-plugin": "^3.4.0" для предварительного рендеринга некоторых моих маршрутов для целей SEO.
Проблема, с которой я сталкиваюсь, заключается в том, что часто, когда я загружаю свое веб-приложение на мобильный (а именно на iOS), значки материалов никогда не загружаются и остаются в следующем состоянии. Когда это происходит, обновление страницы не решает проблему. Часто мне приходится ждать некоторое время, прежде чем открыть другой браузер и загрузить ту же страницу, чтобы значки снова были загружены правильно. Однако бывают случаи, когда значки загружаются успешно. Что еще более озадачивает, так это то, что эта проблема, по-видимому, сильно затрагивает меня, когда я захожу на свой сайт с мобильного телефона (у меня не было возможности провести тестирование на Android, поскольку у меня есть только устройство iOS). У меня никогда не было этой проблемы с использованием любого настольного браузера. Неправильно ли я сам размещаю значки материалов, поэтому это происходит?
Ниже приведен код CSS в моем файле _fonts.scss. ,Как видите, я установил "material-design-icons": "^3.0.1" через npm, и мои URL-адреса указывают на файлы шрифтов в пакете "material-design-icons".
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url("~material-design-icons/iconfont/MaterialIcons-Regular.eot"); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url("~material-design-icons/iconfont/MaterialIcons-Regular.woff2") format('woff2'),
url("~material-design-icons/iconfont/MaterialIcons-Regular.woff") format('woff'),
url("~material-design-icons/iconfont/MaterialIcons-Regular.ttf") format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 16px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Мой файл app.scss просто импортирует_fonts.scss файл следующим образом.
@import "fonts";