Я столкнулся со странной проблемой при тестировании веб-шрифтов на разных платформах. Я работал над проблемами рендеринга шрифтов Windows Chrome, используя проверку Javascript navigator.appVersion в сочетании с медиа-запросом webkit ( поскольку Chrome и Safari — это Webkit, а Safari в Windows можно исключить), и в процессе возникла новая проблема.
Я тестирую в режиме инкогнито как быстрый способ просмотра страницы без сохраненных изображений и т. д., но для меня это было новым.
Я добавил отладку консоли как до, так и после действия в предложении else, которое следует за if(navigator.appVersion.indexOf("Win")>-1, поэтому я вижу, что цикл не прерывается каким-либо неправильным синтаксисом между ними, и никаких ошибок не возникает.
Я думал, что это может быть ошибка в Chrome OS, но в Linux Mint шрифты не загружаются ни в одном из типов окон Chrome. Очистка кешей, файлов cookie и файлов изображений не влияет ни на одну из ОС.
Скриншоты:
- обычное окно Chrome OS (= Windows 8 Chrome),
- окно CrOS в режиме инкогнито (= Linux Mint Chrome) — консоль регистрирует
"loaded"в обоих случаях, а Элемент<style>вставляется в DOM, как и ожидалось.
Я немного не понимаю, как я могу согласовать здесь несоответствия, и, поскольку мой Javascript работает в некоторых случаях, я не понимаю, что не так. Я не решаюсь связаться с любым специализированным форумом по этому поводу, но дайте мне знать, не лучше ли мне сделать это для какой-то группы разработчиков Chrome.
Если кто-то хочет проверить это самостоятельно, вот страница на скриншотах.
Я также попытался войти в GitHub и свою учетную запись Google в режиме инкогнито на случай, если у меня возникнет проблема, связанная с разрешениями, но это ничего не изменило, и, несмотря на это, это все еще не объясняет несоответствие с Windows (работает как в режиме инкогнито, так и в обычном режиме) . Файлы хранятся в общедоступном репозитории GitHub, и я определенно могу получить к ним доступ в браузере даже в ситуациях без рендеринга шрифтов на моем сайте.
<script>
if (navigator.appVersion.indexOf("Win")>-1) {
console.log("Win test")
chromeQuery = document.createElement('style');
chromeQuery.setAttribute('type','text/css');
chromeQuery.innerHTML = "@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chrome-specific SVG font */ @font-face{ font-family: \"SEGOEUIL\"; src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format(\"svg\"), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'); font-weight: normal; } @font-face{ font-family: \"SEGOEUIL\"; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format(\"svg\"), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face{ font-family: \"SEGOEUIL\"; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format(\"svg\"), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'); font-style: italic; } }";
document.querySelector('head').appendChild(chromeQuery);
}
else {
fontload = document.createElement('style');
fontload.setAttribute('type','text/css');
fontload.setAttribute('id','fontload')
fontload.innerHTML = "@font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot'); src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot?#iefix') format('embedded-opentype'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'), local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format('svg'); font-weight: normal; } @font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot'); src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot?#iefix') format('embedded-opentype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format('svg'); font-weight: bold; font-style: normal; } @font-face{ font-family: \"SEGOEUIL\", \"Helvetica Neue\", Arial, sans-serif; src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot'); src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot?#iefix') format('embedded-opentype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format('svg'); font-style: italic; }";
document.querySelector('head').appendChild(fontload);
console.log('loaded')
}
</script>
<noscript><style id="fontload" type="text/css">
@font-face{
font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot');
src: local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.eot?#iefix') format('embedded-opentype'),
local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.woff') format('woff'),
local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.ttf') format('truetype'),
local('Segoe UI Light'), url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/SEGOEUIL.svg') format('svg');
font-weight: normal;
}
@font-face{
font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot');
src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.eot?#iefix') format('embedded-opentype'),
url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.woff') format('woff'),
url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.ttf') format('truetype'),
url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuisb.svg') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: "SEGOEUIL", "Helvetica Neue", Arial, sans-serif;
src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot');
src: url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.eot?#iefix') format('embedded-opentype'),
url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.woff') format('woff'),
url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.ttf') format('truetype'),
url('https://raw.githubusercontent.com/lmmx/websiteresources/master/fonts/weblysleekuili.svg') format('svg');
font-style: italic;
}
</style></noscript>
Редактировать Я не вижу ни одного шрифта, поступающего на панель ресурсов, поэтому я не вижу, как выглядит успех — я вижу то, что кажется шрифтом открытого типа, показывающим какую-то (латентность? ) хотя ошибка, которая может иметь значение?
(Исходный код Pro не используется, а шрифт значков не предназначен для текста)
