Самая эффективная конфигурация webfont с html5 appcache

Question

У меня есть статический сайт на одной странице, где я настроил appcache для кэширования всех ресурсов, необходимых для загрузки страницы для дальнейшего использования, чтобы минимизировать запросы на сервер и сделать страницу доступной в автономном режиме.

У меня возникла проблема с поддержкой шрифтов. Я использую веб-шрифты с форматами @ font-face и woff, ttf, svg и eot для обеспечения совместимости со всеми браузерами. Проблема в том, что я должен включать несколько шрифтов в манифест кэша, чтобы обеспечить совместимость с несколькими браузерами. Обычно браузер просто считывает шрифт @ font-face, выбирает соответствующий формат шрифта и загружает только этот формат (или вообще ничего, если он доступен локально), я не смог найти способ сделать это с помощью appcache, гарантируя, что все доступен в кэше и в автономном режиме. Мое решение состояло в том, чтобы включить все форматы шрифтов в манифест кэша. Хотя это сработало, это было очень расточительно, потому что клиенты загружали шрифты, которые им не нужны.

В конце концов я провел некоторое исследование по поддержке браузера, сравнив appcache, ttf, woff, eot, and svg fonts. Я пришел к выводу, что все браузеры, поддерживающие appcache, работают либо с woff, либо с ttf, и что svg и eot имеют очень небольшую поддержку. (Ограничивающие факторы заключаются в том, что андроид не имеет поддержки woff и IE не поддерживает ttf). Используя это, шрифты по-прежнему отображаются правильно везде. Тем не менее, он по-прежнему неэффективен, поскольку два шрифта загружаются независимо от необходимости.

Итак, что наиболее рекомендуемым способом наиболее эффективно использовать шрифты и апкэши?

Answer 1

As I have since discovered in another question, IE 9+ DOES support TTF fonts, as long as they are formatted correctly. Это означает, что все основные браузеры, поддерживающие кэш приложений HTML5, также могут работать с шрифтами ttf, поэтому мне нужно включить только один формат в кеш. Я изменил синтаксис пуленепробиваемого @ шрифта, чтобы предпочесть TTF по сравнению с WOFF (поскольку это то, что будет в кеше), и добавить маски к манифесту кэш-памяти, чтобы иметь дело с любыми случаями краев.

Вот мой модифицированный @ формат шрифта лицо:

@font-face {font-family: '<font-family>';src: url('<font-file>.eot?#iefix') format('embedded-opentype');src: local('<font-family>'),url('<font-file>.ttf') format('truetype'),url('<font-file>.woff') format('woff'),url('<font-file>') format('svg');} 

Вот кэш манифеста формат:

CACHE MANIFEST 
<other stuff> 
... 
/<font-file>.ttf 

NETWORK: 
*.ttf 
*.woff 
*.svg 
*.eot 

Примечание: поскольку воспитывался в комментариях ниже, с использованием шаблонов в разделе Сеть манифест кэша может быть недействительным. Использование абсолютного URL-адреса - лучший способ пойти.

И here's a webpagetest result of IE10 using and caching the TTF font. Я подтвердил, что @ font-face по-прежнему кажется «пуленепробиваемым» в браузерах.

Есть два незначительные проблемы с этой установкой:

• Клиенты, которые уже имеют шрифт, доступный в местном масштабе по-прежнему загрузить его (это не является серьезной проблемой для меня, так как только около 5% посетителей имеют это)
• Края: браузеры, которые будут читать манифест, но не будут работать с ttf по какой-либо причине, будут по-прежнему работать в Интернете, но не в автономном режиме. Я не мог найти браузер, который проявляет это поведение, но все возможно. Опять же, только очень небольшой процент клиентов испытает это.

Answer 2

Я не верю, что вам нужно явно указать шрифт в манифесте appcache. Пока шрифт используется на странице, он должен автоматически включаться в кэш приложений браузера.