У меня есть купленный/арендованный шрифт, чья лицензия просит меня запрашивать уникальный счетчик в своем домене каждый раз, когда отображается шрифт. К сожалению, их предложение состоит в том, чтобы вызвать его в файле CSS с import
, который блокирует рендеринг на время вызова. Также странно, так как в соответствии с лицензией они хотят отслеживать отдельные просмотры страниц, но если файл CSS, о котором идет речь, кэшируется, не предотвратит ли это повторение импорт до тех пор, пока кеш не очистится?
В любом случае я удалил вызов import
, но потом начал размышлять, что именно я должен его заменить. Какой тег даст мне неблокирующий вызов, который будет работать повсеместно в браузерах и независимо от отключенных функций? Ссылка с rel=prefetch
? HTML5, он не работал в IE7, когда я тестировал его. И это также будет неудобно, поскольку он подразумевает, что ресурс должен кэшироваться, но ответ содержит директиву " No-Cache
. Тег сценария с атрибутами defer
и async
в конце страницы? Может быть, но что, если кто-то отключил скрипты? Я мог бы добавить тег noscript
а затем тег изображения внутри него как резерв. Но! Будет ли изображение отображаться как разбитое для некоторых браузеров, так как содержимое изображения является пустой строкой? И что, если у кого-то есть сценарии, а изображения отключены? о нет! Должен признаться, что для них мир должен быть довольно мрачным местом. Ой ой! Как насчет embed/object
? Теперь, когда просто неправильно, перестаньте прикасаться ко мне смешно.
На данный момент я закончил работу с простым тегом изображения, но какова будет магическая комбинация, охватывающая самый широкий диапазон краевых случаев? Я мог бы добавить тег script
например, для поддержки тех, у кого нет загрузки изображений.
Моя интрига здесь чисто научная, поэтому я не ищу альтернативных поставщиков шрифтов или обсуждать, насколько маловероятны ранее описанные ситуации. Кроме того, почему они предоставляют мне фактический файл шрифта для обслуживания с моего собственного сервера, а затем доверять мне, чтобы вызвать счетчик, честно говоря, вне меня.
Представьте, что мой уникальный счетчик шрифтов находится по адресу http://font.foo/bar, а сервер шрифта.foo действует медленно.
Отправная точка
// fonts.css
@import url('font.foo/bar')
@font-face { ... }
// index.html
<link rel="stylesheet" href="fonts.css">
Отдельный тег ссылки
// Problem: Blocks rendering
// index.html
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="font.foo/bar">
отн = предвыборки
// Problem: Won't load in IE7, semantically awkward
// index.html
<link rel="prefetch" href="font.foo/bar">
Отложенная загрузка скрипта async
// Problem: Won't work when user has disabled scripting
// index.html
<script src="font.foo/bar" async defer>
</body>
Сценарий с добавленным обратным изображением
// Problem: Won't work when user has disabled scripting AND images
// index.html
<script src="font.foo/bar" async defer>
<noscript><img src="font.foo/bar" alt=""></noscript>
</body>
Взгляните на эту статью о загрузке асинхронного контента сторонних разработчиков, чтобы он соматировал вашу страницу.
http://css-tricks.com/thinking-async/
Может быть, смешать это так? У вас есть параметры сценария и продолжайте использовать элемент ссылки вместо img
<script src="font.foo/bar" async defer>
<noscript><link rel="stylesheet" href="font.foo/bar"></noscript>
</body>
<link>
недопустима в<body>