В последние полтора года веб-типографика вызвала сильный интерес, о чем свидетельствует популярность таких сайтов, как ilovetypography.com (в настоящее время популярно более 69 000 подписчиков) и растущее число типографских статей, относящихся к этой теме, в сообществе веб-дизайна и разработки. , Типография остается центральной в эстетике, доступности и, конечно, разборчивости. Те, кто овладевает им и применяет его в Интернете, восхищаются изобретательностью их работы, как стилистически, так и их технической реализацией.
Типография вносит эстетический порядок в информацию, помогая пользователям читать и ориентироваться. Типография дифференцируется; это основной элемент брендинга. Суть в том, что хорошая типография при применении в Интернете создает веб-интерфейс, который проще и приятнее в использовании. Этот новый энтузиазм в этой области перевернул новую страницу в веб-типографике, и его можно объяснить главным образом ростом числа веб-шрифтов и их растущей доступностью во всем диапазоне браузеров, что позволяет нам выйти за рамки основных «безопасных для сети» шрифтов (Andale Mono , Arial, Courier, TNR , Impact, Вердана, Джорджия и Требушет М.С.). Хорошая типография начинается с выбора хороших шрифтов в честь заданного текста; правильный шрифт или группа лиц для правильной работы. Графический роман ужасов, созданный в TNR или Helvetica, будет конфликтовать, отвлекать и противоречить жанру книги и графической среде, которую он использует. Между тем, хороший роман переворачивания страниц (для которого переходный шрифт, такой как TNR , гораздо лучше подходит) будет трудно прочитать в шрифте сценария.
Типография существует в честь содержания
Выбор хороших шрифтов — это один шаг и, возможно, еще более усложненный сейчас, когда у нас есть больше, чем основные веб-безопасные шрифты для работы (или те, которые, скорее всего, будут установлены). Реализация их для наших сайтов — еще одно техническое препятствие. В этой статье будут освещены варианты получения шрифта в Интернете, а затем подробно описаны все методы, при этом особое внимание будет уделено веб-стандартам. Как только у нас появятся наши выбранные шрифты в Интернете, нам нужно будет сделать этот шрифт очень красивым — следите за следующей статьей в этой серии дуэтов, которая будет охватывать более тонкую эстетику.
Варианты доставки шрифтов в Интернет
Существует множество различий в реализации благодаря тому, что многие браузеры предоставляют пользовательские шрифты в Интернете. Это несоответствие сводится к открытому и закрытому обсуждению — блокированию методов, обеспечивающих защиту шрифтовых активов от простой загрузки с веб-сайта, который использует их, по сравнению с более открытой моделью, основанной на доверии. В какой-то степени эта дискуссия имеет сходство с той, которая разгорелась, когда изображения были впервые доступны в Интернете, и сродни ей, эти различия в реализации в значительной степени были урегулированы, так как W3F, как надеются, будет окончательно утвержден в качестве стандарта W3C .
У нас есть множество вариантов, когда вы можете использовать шрифты в Интернете для набора текста. Они, в общем, в историческом порядке доступности:
- установленные шрифты (в основном веб-безопасны)
- Flash (например, sIFR ) и другие методы замены JS
- Куфон и соавт.
- веб-шрифты: EOT / EOT Lite через
@font-face - веб-шрифты: OT / TT через
@font-face - веб-шрифты: SVG через
@font-face - Веб-шрифты: WOFF через
@font-face - услуги хостинга и лицензирования
Установленные шрифты
Вызов установленных шрифтов — это самый простой и легкий способ выбора шрифтов для использования при наборе веб-страниц. В наших таблицах стилей CSS мы просто вызываем список шрифтов через свойство font-family и сортируем их следующим образом:
- желательно
- откаты
- универсальный (например, с
serif,sans-serif,monospace,)
Например, переходной стек шрифтов с засечками:
p { font-family: Baskerville, Times 'Times New Roman' serif ; }
И нео-гротескный стек:
h1, h2, h3, h4, h5, h6, h7 { font-family: Univers, Helvetica 'Helvetica Neue' Arial sans-serif ; }
Здесь довольно просто, если первый доступный шрифт в стеке не установлен на клиентском компьютере, его, очевидно, нельзя использовать для рендеринга, поэтому он переходит к следующему атрибуту в списке и так далее, пока не будет найден доступный шрифт. Мы можем разработать хорошие стеки шрифтов, которые отражают то, что, вероятно, будет установлено на компьютерах наших пользователей, принимая во внимание библиотеки шрифтов по умолчанию для популярных операционных систем. Это позволяет нам осторожно выходить за рамки основных веб-безопасных шрифтов, помещая в список еще один предпочтительный шрифт, который все еще довольно популярен.
Техника замены флэш
Замена Flash — отличный способ замены текста HTML текстом Flash с помощью файла JavaScript. Самая популярная техника — Scalable Inman Flash Replacement ( sIFR ).
Несмотря на то, что он поддерживает поднаборы, это нереальное долгосрочное решение для создания действительно пользовательских шрифтов в Интернете, особенно с учетом его использования нестандартных технологий и использования JavaScript. Это также требует высокой производительности при более длительном времени загрузки страницы (в основном из-за количества запросов, сделанных для требуемых файлов Flash, JavaScript и CSS ). Лучше всего его использовать для установки отдельного заголовка или небольшого ряда заголовков, но это далеко не практично для настройки основного текста.
Куфон и соавт.
Ряд других вариантов замены JavaScript стал доступен после использования методов замены Flash, чтобы выполнить ту же работу без Flash. Cufón , пожалуй, самый популярный из них с онлайн-интерфейсом для простого преобразования данных шрифта в JavaScript, который обеспечивает хорошую поддержку поднабора настроек с рядом других опций кернинга, масштабирования, совместного использования ресурсов объектов ( CORS ) для ограничения использовать для списка доменов.
Cufón преобразует пути шрифтов в VML (теперь по большей части устарел в SVG ), хранящийся в JSON и визуализируемый механизмом рендеринга JavaScript в пользовательском агенте. Хотя он имеет хорошую поддержку браузера, он также не является жизнеспособным долгосрочным решением из-за его плохой доступности.
Веб-шрифты: EOT / EOT Lite
С конца 1997 года Internet Explorer 4 поддерживает Embedded OpenType ( EOT ) для использования с помощью правила @font-face которое было введено в спецификации CSS2 . EOT был решением Microsoft для удаленного метода, который позволял загружать ресурсы настраиваемых шрифтов для использования при типе рендеринга на веб-странице (и видел хорошую историю создания систем записи, которые по умолчанию не поддерживаются в Интернете), не делая эти ресурсы полезными и сделать нарушение авторских прав шрифта жизнеспособным.
EOT устанавливает, сжимает и, наконец, шифрует активы шрифта TrueType. CORS предоставляется в виде списка «доверенных корней». Неудивительно, что при использовании проприетарного метода сжатия, проприетарного процесса шифрования / дешифрования и поддержки только в Internet Explorer EOT и даже EOT Lite (в котором отсутствуют проприетарное сжатие MTX и листинг доверенного корня CORS ) является проприетарным и нестандартным решением в качестве веб-шрифта. формат.
Файлы EOT могут быть созданы с помощью Microsoft WEFT или через ttf2eot , реализацию конвертора с открытым исходным кодом. WEFT стоит пропустить по следующим причинам:
- WEFT будет использовать метод сжатия MTX и превосходит другие методы, такие как gzip.
- WEFT работает только на Windows и работает ненадежно под эмуляторами (например, Parallels).
-
ttf2eotне сжимает — вместо этого используйте сжатие на стороне сервера. - Веб-интерфейс Font Squirrel @ font-face для
ttf2eotпрост и удобен в использовании.
Веб-шрифты: OT / TT
Работает аналогично веб-шрифтам EOT, будучи связанным в объявлении @font-face src: для загрузки и непосредственного использования для отображения типа.
OpenType / TrueType — это практически открытый метод предоставления веб-шрифтов с довольно хорошей поддержкой браузера (Safari 3.1+, Firefox 3.5+, Opera 10+, Chrome 4+; бета-версия IE9 и Android 2.2+). Конечно, сразу становится очевидным, что ресурсы шрифта не зашифрованы, не привязаны к каким-либо доверенным корням или ограничениям CORS и в формате, легко используемом на рабочем столе вне среды браузера (например, публикация рабочего стола и обработка текстов) после простой загрузки. Кроме того, настройка и сжатие не являются автоматическими и находятся в ведении хозяина шрифтовых активов.
Веб-шрифты: SVG
Кроме того, в спецификации @font-face SVG ссылаются в объявлении src: точно так же, как на шрифты EOT , OTF или TTF .
Опять же, файлы SVG не скрыты и поэтому легко доступны для загрузки для использования за пределами веб-страницы, на которую они ссылаются. Поддержка браузеров также довольно распространена (Firefox 3.5+ Chrome 0.3+, Opera 9+, Apple iOS1 + и Safari 3.1+ ), и как и в случае веб-шрифтов OT / TT , настройка и сжатие зависят от хоста.
Файлы SVG могут быть сжаты gzip в файлы .svgz .
Веб-шрифты: WOFF
Методы замены Flash / JavaScript, а затем Cufón показали веб-типографам и технологам, что требуется специальный, открытый и стандартизированный формат веб-шрифта. EOT от Microsoft, его расширение Ascender, прямые ссылки на шрифты EOT Lite, OT / TT и SVG — все это соревновалось в открытом доступе в Интернете в конкурсе популярности, чтобы увидеть, что будет принято в первую очередь при самом широком использовании и поддержке браузера. Этот конкурс возродил дискуссию на W3C по поводу открытого стандартизированного формата веб-шрифтов. WOFF стремится заполнить этот пробел.
Работа с @font-face WOFF объединяет сжатые данные sfnt-font (PostScript, TrueType или OpenType) с пакетом метаданных XML для создания открытого файла шрифтов, который идеально подходит для переноса шрифтов в Интернет. Файлы WOFF создаются с открытым исходным кодом sfnt2woff . Поднабор сводится к хосту. CORS доступен через заголовки ответа HTTP . В конечном счете, данные шрифта все еще могут быть извлечены, но если для поднабора распаковки файл шрифта WOFF для извлечения полезных данных шрифта для внешнего использования требует усилий, и, вероятно, результирующие данные шрифта будут ограничены (из-за поднабора).
В настоящее время WOFF поддерживается в Firefox 3.6+, WebKit, Chrome 5+ и бета-версии IE9 .
Услуги хостинга и лицензирования
В то время как поиск хорошего, открытого и стандартизированного формата веб-шрифтов продолжался, многие литейные заводы и ряд технологов начали исследовать свои собственные идеи по созданию пользовательских шрифтов в Интернете. Поскольку появилось несколько веб-хостингов и служб лицензирования, предлагающих библиотеку шрифтов с различными бесплатными и коммерческими планами: TypeKit , Kernest , Fontdeck , Monotype’s webfonts.fonts.com , служба веб-шрифтов Typotheque и т. Д. Создайте учетную запись, просмотрите библиотека, выбрать, оплатить, ввести несколько строк кода, обновить. Вы сделали.
Домашняя страница fontdeck.com.
С технической стороны эти сервисы предоставляют правильный или лучший шрифт ( EOT , OT / TT , SVG и, скорее всего, WOFF ) для правильных браузеров — если запрос сделан пользователем с помощью Internet Explorer, будет отправлен файл EOT . Поднастройка выполняется ими в зависимости от того, какие языки и функции вы, вероятно, хотите использовать, и сжатие также обрабатывается на стороне службы.
Реализации в значительной степени основаны на стандартах и обеспечивают очень обширную поддержку браузера. Веб-интерфейсы просты в использовании и имеют обширную библиотеку качественных шрифтов для выбора между всеми поставщиками услуг.
Поиск свободно лицензированных шрифтов
Теперь, когда мы можем реализовать пользовательские шрифты в Интернете, используя @font-face , вы можете задаться вопросом, где можно получить свободно лицензированные и бесплатные качественные шрифты для использования в Интернете (и в других местах). Места, достойные вашего внимания:
- openfontlibrary.org
- theleagueofmoveabletype.com
- fontsquirrel.com , в частности, предварительно сгенерированные наборы
@font-face - вики-сайт webfonts.info
- и Google Font Directory, доступный через их Font API напрямую для связи
Использование @font-face
Если вы решите не использовать службу хостинга и лицензирования, а вместо этого захотите самостоятельно размещать и ссылаться на файлы шрифтов, используя @font-face , создание различных файлов шрифтов и получение синтаксиса для правильного объявления может показаться утомительным. На самом деле с пуленепробиваемым синтаксисом благодаря веб-интерфейсу @font-face Пола Ирриша и Font Squirrel это просто кусок пирога.
Создание файлов @font-face
У вас есть нужный шрифт, который вы можете использовать на веб-странице, или вы нашли хороший бесплатный лицензионный шрифт, который вы можете использовать в качестве веб-шрифта. Скорее всего, ваш шрифт будет файлом OT / TT или PostScript, для которого вам нужно создать сжатые файлы EOT , OT / TT , WOFF и SVG с поднабором. Самый простой способ достижения всех этих целей — использовать веб-интерфейс Font Squirrel @ font-face :
Font Squirrel @font-face Kit Generator.
Просто выберите и загрузите свой шрифт, после чего вы можете выбрать простой маршрут и использовать настройки по умолчанию, чтобы Font Squirrel сгенерировал ваш комплект для загрузки, или вы можете выбрать путь эксперта и настроить практически все нюансы полученного результата. файлы шрифтов. Доступ к пользовательским поднаборам позволяет точно контролировать типы поднаборов символов, поднаборы для языков, поднаборы с помощью таблиц и диапазонов Юникода, а также конкретных символов, представляя список всех символов, которые будут включены в результирующие вложенные файлы шрифтов.
Когда вы закончите, загрузите ваш комплект готов к развертыванию.
«Пуленепробиваемые» @font-face декларации @font-face
Написание пуленепробиваемого @font-face не сложно, но есть некоторые недочеты, на которые стоит обратить внимание. Давай приступим к работе.
По сути, мы хотим передать Internet Explorer файл EOT и передать файлы OT / TT других браузеров, одновременно обеспечивая прямую поддержку браузеров, поддерживающих WOFF . Порядок, в котором мы перечисляем эти файлы в объявлениях src: важен, потому что (сюрприз, сюрприз) иначе Internet Explorer будет без необходимости загружать другие файлы, даже если он не может их обработать, тратя время загрузки страницы на ненужные дополнительные соединения и трафик. Таким образом, используя Museo:
@font-face { font-family: 'Museo 500' ; src: url( 'Museo500.eot' ); src: local( '?' ), url( "Museo500.woff" ) format( "woff" ), url( "Museo500.otf" ) format( "opentype" ), url( "Museo500.svg#museo" ) format( "svg" ); }
Рассматривая это, мы начнем с того, что дадим шрифту, который мы хотим связать, имя, на которое мы можем ссылаться для стеков шрифтов. Атрибут произвольный.
Затем следует файл EOT , первый в списке src: чтобы избежать того, что в IE вышеупомянутое соответствие.
Затем локальный src: call, хотя мы фактически опускаем указание локального объявления src: вместо ввода «?». Для этого есть две основные причины. Во-первых, это предотвращает (хотя довольно маловероятно) вероятность того, что у пользователя будет установлен шрифт (который будет использоваться вместо этого, сохраняя загрузку), который соответствует вашему локальному атрибуту, но на самом деле не является вашим желаемым шрифтом, разрушающим ваш стек шрифтов и, возможно, ваш дизайн. Маловероятно, что установленный шрифт будет называться «?», И согласно спецификации OpenType любые двухбайтовые символы Юникода не будут работать в качестве имени шрифта, исключая Mac полностью из этой проблемы с этим решением.
Во-вторых, в Webkit и Mac OS X по-прежнему обнаруживаются различные ошибки при обработке локальных ссылок. Если вы уверены, что существует высокая вероятность того, что у пользователя может быть установлен нужный шрифт (например, это свободно доступный и свободно лицензируемый популярный шрифт, такой как Museo ), и маловероятно, что может быть установлен другой шрифт с таким же шрифтом. Локальная ссылка, а затем создание local записей — это нормально, это значит, что нужно оценить вероятность того или иного экземпляра.
В случае, если вы хотите определить локальную ссылку src: reference, может показаться странным, что вы можете написать две слегка отличающиеся записи для local в src: например: src: local(" Museo 500 Italic "), local(" Museo500-Italic "), .
А? Это связано с тем, что некоторые браузеры ссылаются на локальные шрифты через имена PostScript. Чтобы найти локальные имена для шрифта в Mac OS X, откройте «Книгу шрифтов», выберите свой шрифт и выберите « Просмотр» → « Показать информацию о шрифте» (или ⌘ + I). Для Windows есть загружаемое расширение свойств шрифта . После установки щелкните правой кнопкой мыши и выберите « Свойства» в файле шрифта и перейдите на вкладку « Имена », чтобы просмотреть сведения об имени.
Снимок экрана книги шрифтов в Mac OS X с демонстрацией режима просмотра информации о шрифтах.
Затем идут определения WOFF и OT / TT src: определение SVG . Обратите внимание на #museo в "Museo500.svg#museo" . Это связано с тем, что SVG- файлы являются XML- файлами, и поэтому нам нужно ссылаться на начальный div (например, после начальных метаданных), который ссылается на начало пути вектора шрифта.
Это оно; сделано. Авторы благодарности и признательности обращаются к Полу Айришу за то, что он раскрыл мельчайшие детали написания пуленепробиваемых определений синтаксиса @font-face .
Проблема: «двойная настройка» стилей и вариантов
При использовании @font-face мы, вероятно, будем иметь дело с отдельными файлами шрифтов одного и того же семейства для различных стилей шрифта, например, foobar-regular.otf , foobar-italic.otf , foobar-bold.otf , foobar-smallcaps.otf и так далее.
Это может стать проблемой — рассмотрите такие элементы, как strong и em , стилизованные под установку лица жирным шрифтом и курсивом соответственно. Если мы объявим курсив, как обычно в CSS (как мы бы добавили стиль в наш дизайн), то получится, что курсив будет выделен цифровым курсивом (фальшивый курсив) механизмом рендеринга шрифтов. Результат? Наш шрифт курсив или жирный шрифт взят и выделен цифровым курсивом или жирным шрифтом, что приводит к ужасным результатам.
Если мы избегаем или перезаписываем различные объявления (например, em { font-style: normal ; } ) и по какой-либо причине наш желаемый @font-face недоступен, мы грабим другие шрифты в стеке шрифтов их стиля. Мы преодолеваем обе эти проблемы, устанавливая стили шрифта в объявлении @font-face , информируя пользовательский агент, что мы на самом деле уже определяем курсив или полужирный шрифт и что их следует оставить как есть, когда они используются для установки чего-либо, что объявлено через CSS быть курсивом или жирным шрифтом:
@font-face { font-family: 'Museo 500' ; font-style: italic ; src: url( 'Museo500.eot' ); src: local( '?' ), url( "Museo500.woff" ) format( "woff" ), url( "Museo500.otf" ) format( "opentype" ), url( "Museo500.svg#museo" ) format( "svg" ); }
Соображения
Предостережения, недостатки и компромиссы существуют во всем, и настройка типов не исключается. При размещении шрифтов в сети необходимо учитывать и учитывать ряд факторов. Многие из компромиссов, которые сделаны в мире печати, не относятся к веб-среде, но другие занимают их место.
Больше ≠ лучше
В соответствии с растущей доступностью новых шрифтов для Интернета важно отметить, что больше шрифтов не требует мгновенной лучшей типографии. Шрифты являются активами. Их можно рассматривать как инструмент в наборе инструментов; обои в арсенале дизайнера интерьера. Она может иметь доступ к тысячам различных рисунков и цветов обоев, но если большинство из них изготовлено из некачественного материала или просто не хватает необходимой приятной грации, которая требуется, чтобы открыть и осветлить (или затемнить, если того заслуживает ситуация) пространство, которое они применяются к тому, что еще тысяча приносит мало пользы.
Для экрана или печати?
В дополнение к художественным проблемам, многие шрифты, доступные как веб-шрифты, не были предназначены для использования в Интернете (или, точнее, на экране). Типография и типография расцвели в полиграфии. Существуют сотни изысканных профессионально разработанных и вырезанных шрифтов и семейств, доступных для всех типов печатных работ, но многие из них не были подготовлены для использования на экране. Хорошие шрифты, которые были разработаны или были перенесены в цифровой мир, были тщательно оптимизированы для идеального отображения на пиксельном экране. Эта оптимизация известна как хинтинг и хорошие веб-шрифты впоследствии имеют хорошие таблицы хинтов .
Sub-настройка
Цифровой шрифт — это данные, и крупные шрифты, то есть те, которые имеют большой набор глифов, охватывающий большой диапазон символов, станут значительными активами, которые пользовательский агент сможет загрузить для рендеринга. Здесь используются два метода, чтобы уменьшить размер шрифтовых активов, чтобы сделать их меньше, что снижает задержку в сети.
Первый метод называется поднабором и представляет собой процесс удаления глифов для символов из файла шрифтов, которые не используются. Представьте себе великолепное суперсемейство с фантастической языковой поддержкой, которое также может похвастаться дополнительными историческими лигатурами, различными дополнительными стилистическими наборами, штрихами, маленькими столицами и многим другим. Один шрифт даже для романа этой семьи может превышать 1024 КБ. Если не требуется ничего, кроме ASCII , Latin 1, Latin Extended-A и Latin Extended-B (который охватывает все западноевропейские языки с небольшим пространством для маневра), есть много неиспользуемых символов, для которых глифы загружаются излишне.
Поднастройку можно выполнить в редакторе шрифтов (например, FontForge , бесплатный редактор шрифтов). Просто откройте свой шрифт, выберите неиспользуемые блоки символов и удалите их; сохранить — убедитесь, что у вас есть копия оригинала.
компрессия
Вторая техника — это сжатие. Сжатие шрифта очень похоже на сжатие файлов для уменьшения размера вложений электронной почты. Сжимая файлы шрифтов, мы можем еще больше снизить задержку и сетевой трафик. Эта операция выполняется на стороне сервера, сжимая различные ресурсы, запрашиваемые пользовательскими агентами, которые после загрузки распаковываются на лету и используются для визуализации веб-страницы.
Два самых популярных метода — через внешние модули расширения веб-сервера Apache; mod_deflate и mod_gzip .
Вполне вероятно, что ваш веб-хостинг предоставит поддержку по крайней мере для одного из них (если нет, то это заслуживающий внимания запрос — ведь снижение их задержки и трафика отвечает их собственным оперативным интересам).
Если вы обнаружите, что используете Microsoft IIS, есть параметр сжатия HTTP, который можно включить и настроить.
Конфигурирование mod_deflate
После установки и включения мы можем настроить mod_deflate в нашем файле .htaccess :
# Compression using deflate AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css <FilesMatch "\.(js|css|html|htm|php|xml|txt|otf|ttf|eot|svg|woff)$"> SetOutputFilter DEFLATE </FilesMatch>
В FilesMatch перечислите расширения файлов, для которых файлы mod_deflate должны сжиматься.
Конфигурирование mod_gzip
Точно так же mod_gzip может быть настроен в файле .htaccess :
# Gzips content if possible <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl|otf|ttf|eot|svg|woff)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text.* mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_include mime ^application/json$ mod_gzip_item_include mime ^application/vnd.ms-fontobject$ # There is no content-type for OTF yet, so we can get away by just # listing the extension in the mod_gzip_item include file listing. # For the sake of being good I have added the vendor-specific # IANA content-type for EOT. mod_gzip_item_exclude mime ^image.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* mod_gzip_send_vary On </IfModule>
Так же как и FilesMatch FilesMatch с использованием mod_gzip_item_include file мы можем перечислить расширения файлов для файлов, которые mod_gzip должен стремиться сжимать. Типы контента также могут быть перечислены через mod_gzip_item_include mime типы медиа IANA, как это сделано для EOT vnd.ms-fontobject для конкретного vnd.ms-fontobject .
Вы можете проверить, насколько эффективно выполняется сжатие, с помощью различных плагинов для разработчиков браузеров или с помощью REDbot Марка Ноттингема, робота, который проверяет ресурсы HTTP на наличие распространенных проблем и ловушек. Например, при проверке http://www.sitepoint.com REDbot отмечает через Content-Encoding что используется mod_gzip. При проверке ресурсов мы видим, что 84% исходного размера страницы (при распаковке) сохраняется с помощью mod_gzip с подробными цифрами для различных ресурсов.
Кэширование
Наконец, мы также можем кэшировать наши файлы шрифтов, уменьшая как задержку, так и сетевой трафик. Кэширование позволяет нам информировать пользовательских агентов, которые обращаются к нашему сайту и загружают наши ресурсы, о том, что некоторые ресурсы вряд ли изменятся в обозримом будущем, и поэтому их повторная загрузка при доступе к сайту на более поздней стадии будет пустой тратой времени. а данные — просто храните («кешируйте») эти ресурсы в кеше пользовательского агента локально. Активы, которые вряд ли могут измениться, будут включать таблицы стилей (файлы .css ), файлы JavaScript для функциональности сайта (файлы сценариев .js ) и, конечно, ресурсы шрифтов.
Мы можем кэшировать различные ресурсы с помощью файла .htaccess , снова выбрав диапазон типов содержимого с помощью FilesMatch а затем установив максимальное время, в течение которого эти ресурсы должны кэшироваться пользовательскими агентами перед повторной загрузкой ресурса (чтобы обеспечить сохранение обновленных кэшированных копий). Примечание: max-age время задается в секундах (здесь 2592000 секунд = 43 200 минут = 720 часов = 30 дней).
# Cache following file types for one month <FilesMatch ".(js|jpeg|jpg|...|otf|ttf||eot|svg|woff)$"> Header set Cache-Control "max-age=2592000" </FilesMatch>
это оно
Теперь у вас есть возможность применять пользовательские шрифты в Интернете как самостоятельно, так и через службу лицензирования и хостинга веб-шрифтов. Обязательно обратите внимание на вторую статью в этой серии, посвященную стилизации, в которой новый тип шрифтов выглядит довольно красиво.