Привет всем,
Поэтому сегодня я рад запустить новый подкаст «Фестиваль дизайна», который начнется с видео-вебинара. Мы будем чередоваться только с аудио-эпизодами (интервью, дискуссии, …) и видео-вебинарами бесед и тому подобное.
Сегодняшний эпизод — это первая часть доклада о веб-типографике, который я дал в различных формах, в частности на веб-направлениях на юг 2010 года : « Создание дружественного к стандартам веб-типа» .
Он включает в себя ввод шрифта в сеть, подробно рассматривая различные варианты загрузки шрифтов и пользовательских шрифтов в Интернет, вкл. примечания по оптимизации, таким как поднаборы, сжатие и кэширование.
Скачать этот эпизод
Вы можете скачать этот эпизод в виде отдельного файла MP4. Вот ссылка:
- Подкаст DesignFestival # 1: Установка стандарта веб-типа (MP4, 31:25, 63,1 МБ)
Подписаться на подкаст
Подкаст DesignFestival находится в iTunes! Добавьте подкаст DesignFestival в свой плеер iTunes . Или, если вы не используете iTunes, вы можете подписаться на канал напрямую .
Резюме Эпизода
Вот темы, затронутые в этом эпизоде:
- Что такое типография?
- «Веб-безопасные» шрифты
- веб-шрифты: EOT / EOT Lite
- веб-шрифты: TT / OT
- веб-шрифты: WOFF
- веб-шрифты: SVG
- услуги хостинга шрифтов и лицензирования
- оптимизации: подмножество, сжатие, кэширование
Аудио стенограмма
Привет и добро пожаловать на первый вебинар в серии вебинаров Design Festival. Этот первый доклад в основном посвящен веб-типографике. И он был первоначально представлен на конференции Web Directions South здесь, в Австралии, еще в 2010 году. Слайды немного отличаются. Разговор был обновлен с тех пор. Итак, для тех из вас, кто был там, или для тех, кто с тех пор загрузил слайды в формате PDF, есть несколько небольших изменений. Итак, давайте прямо в это.
Установка стандартов для веб-типов (с хорошим упором на стандарты).
Я быстро пробежусь к тому, кто я есть. Я один из тех студентов бакалавриата искусств. Я графический и веб-дизайнер и, конечно, типофил. И я полагаю, что на данный момент четвертый пункт в этом списке — это то, что я являюсь одним из основных авторов и редакторов на DesignFestival.com в команде Design Festival.
Итак, типофилы. Типофилы — ну, по сути, просто большие, вундеркинды гигантского типа. И учитывая, что вы слушаете это, вы вполне можете быть одним из них. Итак, я полагаю, если да, поднимите руку и заявите о себе или кричите.
Далее, прежде чем продолжить, я хотел бы начать с определения. Я думаю, что определения избегают неправильных представлений, и они могут дать нам свет в конце туннеля в той или иной форме.
Типография — это искусство создания и установки шрифта с целью соблюдения текста, который мы устанавливаем. Первая часть этого кажется, вероятно, довольно простой, но вторая часть действительно важна, и мы должны осознавать контекстную природу того, с чем мы работаем. Итак, мы работаем с комиксом? Или мы работаем с триллером-романом?
Этот разговор был первоначально разделен на две части; первая часть посвящена созданию шрифта в Интернете, а вторая часть — настройке этого типа. Вторая часть доклада будет освещена на более позднем этапе, поэтому этот вебинар охватывает только первую часть. Так что следите за обновлениями.
Давайте тогда перейдем непосредственно к первой части.
Почему мы это делаем? Какова причина? Почему мы должны беспокоиться? Ну что же, пойдем с посылкой. Интернет абсолютно полон информации, и большая ее часть текстовая. И действительно, большая часть этого все еще является болью для чтения. Типография может привнести эстетический порядок в текст, в информацию, и это поможет вашим пользователям действительно ориентироваться. И я полагаю, что, возможно, причина, по которой вы здесь, заключается в том, что недавно возобновился интерес к типографии.
Типография является основой эстетики. Это имеет решающее значение для доступности, разборчивости и читабельности (которые являются двумя слегка отличными, но взаимосвязанными частями). И многие из новых методов набора текста, которые были опубликованы и написаны в различных журналах по веб-дизайну, журналах, блогах и т. П., Восхищались их изобретательностью (особенно новыми). И, конечно же, у нас также растет доступность веб-шрифтов в сети.
Другими словами, это просто делает текстовые вещи красивыми, что всегда хорошо. И суть в том, что веб-приложения с хорошей типографикой намного проще для чтения и приятны в использовании.
Давайте рассмотрим несколько предположений о типе в Интернете, веб-шрифтах и веб-типографике. Я предполагаю, что первое — это отстой, или это может быть скучно; что он без засечек только для удобства чтения (это довольно старый); что у нас есть доступ только к веб-безопасным шрифтам и все; что есть ограниченный контроль; что если мы хотим сделать что-то необычное, нам нужно прибегнуть к Flash и другим нестандартным технологиям. И я полагаю, что последний из них состоит в том, что есть так много вариантов и «Как я могу это сделать? Это может быть слишком сложно ». И, к счастью, это не совсем так.
Есть, однако, некоторые проблемы и подводные камни, о которых нам следует помнить. Итак, предположения позволяют нам исследовать потенциальные проблемы и исправлять их.
Первое (и это личное, реальное, важное примечание) заключается в том, что больше шрифтов не равно мгновенной хорошей типографии. Многие из новых веб-шрифтов не оптимизированы и даже не предназначены для использования в Интернете. Итак, об этом нужно помнить. Я полагаю, это проблема или это не проблема, растущая доступность веб-шрифтов. И первые два пункта указывают на некоторые проблемы.
Существует множество различий в реализации. В некоторой степени все еще существует, но в значительной степени уже завершена борьба между открытыми и закрытыми технологиями. Итак, стандартизированный материал с открытым исходным кодом и проприетарный — подумайте о Flash, такого рода вещи. А на техническом уровне подмножество и сжатие становятся вашей ответственностью, если вы не используете хостинг (подробнее об этом позже).
Следующий вопрос: как нам это сделать? И ответ там есть целый ряд вариантов. Они различаются по технической сложности и стилистической универсальности. И многие из них основаны на стандартах, и вы можете использовать их сейчас, и это здорово!
Итак, давайте перейдем непосредственно к параметрам, которые у нас есть для настройки типа в Интернете (или, скорее, шрифтов в Интернете).
Первый вариант — это установленные шрифты. Итак, в основном это веб-безопасные шрифты. Второй вариант, который я собираюсь использовать, — это SIFR или Scalable Inman Flash Replacement и другие технологии замены Javascript и Flash. Там есть cufón. И затем, у нас есть ваши веб-шрифты, которые являются EOT или EOT Lite через декларацию @ font-face. Затем, также используя веб-шрифты, это Open Type и True Type через @ font-face. Тогда у нас есть WOFF. У нас есть SVG-шрифты. И, наконец, у нас есть услуги листинга и лицензирования.
Итак, первый. Это действительно довольно старый и очень простой. По сути, вы вызываете шрифт непосредственно в объявлении стека шрифтов. Итак, вы можете пойти:
семья шрифтов: Басквиль, Times, «Times New Roman»…
И затем, у вас есть окончательное объявление, которое является вашим де-факто системным шрифтом, который будет определен вашей операционной системой. Вы можете иметь другой стек шрифтов. Итак, Helvetica или этот шрифт без засечек.
Итак, что такое стеки шрифтов? Стеки шрифтов — ну, по сути, вы хотите привести их в порядок. У них есть иерархия. Сначала вы хотите, а потом просто, я полагаю, наступит запасной вариант. И наконец, у нас есть универсальный тип, который определяется системой нашей операционной системой. Довольно просто. Я полагаю, что любой, кто работал в CSS, должен быть в курсе всего этого.
Затем, Масштабируемая Замена Вспышки Inman. Это технология замены Flash, которая работает в унисон с Javascript и заменяет тип из файла Flash. Это не реально выполнимое решение в долгосрочной перспективе, поэтому, я думаю, другими словами, не используйте его, потому что есть много лучших вариантов. Это делает подмножество. Это нестандартно и основано на замене Flash и Javascript. Это, однако, высокая производительность. Таким образом, существует большое время загрузки страницы, и это не реально для вашей основной копии (так, для большей части текста на вашей странице, абзацев и тому подобного).
Далее (и это примерно в исторической хронологии), это реализации cufón и Javascript. Итак, это были первые реализации только для Javascript. В частности, cufón хранит пути шрифтов в путях VML и сохраняет их в JSON. А затем отрисовал их (пути к шрифту), используя Javascript.
Есть несколько проблем. Это не особенно доступно, но оно работает в большинстве браузеров. И это начало целую дискуссию. И литейные заводы были особенно скептически настроены, потому что это не услуга. Есть ограниченная палитра шрифтов. И было беспокойство, что люди могли получить доступ к шрифтам, которые были установлены, и извлечь данные о шрифтах и, по сути, пиратские шрифты. Так что это не тот, который мне особенно нравится использовать. И, наконец, я предполагаю, что конвертер, особенно в отношении cufón, был частным, и это часто так.
Тогда у нас были веб-шрифты. Это было разработано Microsoft. Это встроенная открытая версия реализации Microsoft веб-шрифтов для Интернета через CSS. И это было на самом деле очень долго. Но EOT и EOT Lite (или, скорее, оба) имели поддержку только в Internet Explorer. Вы можете ограничить использование ресурсов шрифта списком доверенных корней, то есть списком имен доверенных доменов и имен поддоменов и т. Д., Чтобы другие люди не могли просто ссылаться на ваши ресурсы шрифта, а затем использовать этот шрифт.
Он использует веб-шрифты и описывается как «обледенение DRM на торте открытого типа». Опять же, есть пара проблем и вещей для размышления. Во-первых, это нестандартно. Это запатентованное решение. Для создания этих шрифтовых ресурсов требуется собственный конвертер. И предложение было отклонено W3C. И пока что поддерживается только в Internet Explorer.
Во-вторых, у нас есть реализация веб-шрифтов Open Type и True Type. При этом также используется объявление CSS веб-шрифта и ссылки через исходное объявление напрямую на файл TTF открытого типа, который загружается, а затем используется для визуализации типа. Реализуемое.
Мысли: файлы могут быть легко загружены. По сути, вы просто просматриваете CSS, берете файл открытого типа / истинного типа и можете сохранить его. И тогда вы можете делать все, что захотите, на рабочем столе. Таким образом, проблема заключается в том, что люди могут легко получить доступ к шрифтам, на которых литейные предприятия, по сути, зарабатывают свои деньги, и загружать их из Интернета, и им не нужно платить за них только потому, что этот веб-сайт решил разместить определенный шрифт, который является собственностью и будет стоить немалых денег. Вы можете легко получить доступ к нему.
Он имеет довольно хороший диапазон поддержки — Safari 3.1 и выше, Firefox 3.5 и выше, Opera 10 и выше, Chrome 4, IE9 имеет версию для разработчиков (и теперь эта версия поддерживает) и Android 2.2 plus. И я полагаю, что важно то, что подмножество и сжатие сводятся к автору. И снова, об этом позже. Так что, если эти два термина вам чужды, не волнуйтесь. Они будут покрыты в ближайшее время.
Итак, давайте рассмотрим несколько примеров отображения шрифтов или веб-страниц с использованием шрифтов True Type и Open Type. Все на этой странице здесь буквально просто текст. Там нет изображений. Все шрифты, все чисто текст. Вы можете выбрать его, и это в основном просто текст, но он отображается с использованием загруженных шрифтов Open Type и True Type.
Давайте пройдем через несколько других. Извините, они скоро придут.
Далее идет WOFF, который является файлом веб-шрифтов. Он также работает напрямую с веб-шрифтами, и вы снова просто обращаетесь к нему в объявлении источника. А файл WOFF — это, по сути, просто сжатые данные шрифтов с небольшим пакетом XML, и он построен с использованием этого SFNT — который, я думаю, по памяти, это стандартные данные шрифтов — для WOFF.
Помимо того, что он великолепен, CRS (совместное использование ресурсов между объектами) доступен по заголовкам HTTP-ответов. Это означает, что вы можете ограничить — совершенно аналогично тому, как это делает EOT, — ограничить доверенные, разрешенные домены или поддомены, которым разрешен доступ и отображение этих данных.
Вы можете извлечь необработанные данные, но это требует дополнительных усилий. Он также имеет хороший диапазон поддержки. Я верю Safari или Webkit в целом — нет, Webkit уже там. Я верю, что Safari также добавит, если это еще не сделано (мне нужно проверить это). И опять же, в версии для разработки IE9 она есть, так что она определенно есть. И наконец, подмножество и сжатие снова сводятся к автору.
Наконец, в области веб-шрифтов у нас есть SVG (масштабируемая векторная графика) шрифты. Кроме того, опять же, непосредственно ссылается на объявление источника в объявлении @ font-face в CSS.
Пара мыслей: можно легко скачать, довольно хороший диапазон поддержки. Интересно, что это единственный, который поддерживает iPhone. Начиная с версии 1+, я должен смотреть на более свежие версии. Опять же, подмножество и сжатие сводятся к автору.
Наконец, в нашем списке появились службы веб-хостинга и лицензирования, которые предлагают огромную библиотеку бесплатных и коммерческих планов для размещения шрифтов на вашем сайте. И несколько из тех, которые мы пройдем: Typekit, Kernest. Также есть Font Deck и пара других.
Эти инициативы основаны на Javascript, но не исключительно. Они предоставляют хостинг, платную подписку. По сути, вы выбираете гарнитуры шрифта, который вам нравится. Вы платите за свой план или за разовый сбор этих шрифтов. Вы добавляете небольшое количество кода на свой сайт, перезагружаете и все.
Извините, здесь есть пара недостатков. Это считается «решением» и было или стало, и теперь, вероятно, стало скорее решением, особенно если вы не хотите размещать свои собственные вещи. Это в значительной степени основано на стандартах. Он имеет действительно хороший диапазон поддержки браузера. Это довольно просто, потому что хост управляет многими вещами. Поднаборы и / или сжатие выполняются на стороне сервера (кем бы ни был ваш поставщик услуг).
Итак, это сайт Typekit. Это немного устарело, но тогда это был сайт. И все, что вы видите здесь на странице — панель, я думаю, что только несколько скриншотов и логотипов — это просто текст. Итак, этот большой вступительный текст, который говорит, что «самый простой способ использовать настоящие шрифты на вашем сайте» — это буквально простой текст. И это установлено в Белло голландским литейным заводом, который я считаю и назвал Нижним бельем.
Что касается интерфейса Typekit, то, опять же, он немного устарел, так что, я думаю, все изменилось. По сути, вы можете посмотреть на свой образец. Вы даже можете вставить свой собственный текст, чтобы увидеть, что это такое. Вы можете прочитать о шрифте. А затем вы выбираете стили, которые вы хотите, и так далее. Вы можете видеть здесь, что стили и подмножества в настоящее время не находятся в той версии скриншота, но я считаю, что это было добавлено с тех пор.
Итак, давайте посмотрим на пару веб-страниц, которые используют Typekit. Все здесь в значительной степени просто текст — довольно красиво! И все это выбираемо и вполне доступно. Таким образом, читатель экрана сможет прочитать это. Опять же, почти весь обычный текст, особенно творческий пиксель и Lorem Ipsum — очень, очень симпатичный.
Это веб-сайт Font Deck. Это немного устарело. Я должен обновить скриншоты. Извините, это презентация первоначально с 2010 года, но почти все еще в значительной степени актуально.
Это сайт Typotheque. И вы бы очень прыгнули, вы выбрали шрифт, вы посмотрите на калькулятор цен. Вы выбираете, какой тип лицензии вы хотите, хотите ли вы, чтобы веб-версия или вы хотите опубликовать, загружаемую версию (которая намного дороже), или вы можете получить их вместе, я полагаю. Или, скорее, когда вы покупаете загрузочную версию, вы получаете бесплатную лицензию веб-версии.
Итак, у вас есть однопользовательская лицензия на Brioni по цене 18 евро. И это шрифты Typotheque в действии, включая кириллицу и арабский справа налево. Опять же все обычный текст и CSS. Фактически, единственное изображение, которое я считаю на этой странице, — это предварительный просмотр бета-версии в правом верхнем углу и небольшая графическая диаграмма. Все остальное — простой текст, все сделано в CSS и хорошая семантическая разметка.
Это старая версия сайта Typotheque. С тех пор это было обновлено, но у них также есть отличный обзор. Итак, если вы заинтересованы во всех основных поставщиках услуг, все они предоставляют дополнительную полезную информацию о том, как они работают, насколько широк диапазон поддержки и так далее. Это все еще устарело от скриншотов. Итак, вы можете выбрать лицензию. Вы даете ему домен, к которому хотите применить его, и выбираете нужные стили, какие языки вы хотите, хотите ли вы использовать дополнительные функции открытого типа, такие как маленькие заглавные буквы. Вот и все.
Итак, это страница на моем веб-сайте, на самом деле одна из моих университетских эссе, написанная некоторое время назад — я не помню, что это за шрифт, но это из Typotheque. Однако давайте разберемся с некоторыми техническими деталями.
Прежде всего, одна из вещей, которые мне нравится делать при использовании @ font-face, потому что это объявление CSS — и вы собираетесь делать немало вещей в CSS — это сброс. Итак, почему мы сбрасываем? Все браузеры имеют свои собственные значения по умолчанию для различных элементов xHTML и HTML. И это делает его болезненным для разных браузеров.
Я знаю, что это спорный вопрос для некоторых. Для меня это практика, которой я давно пользуюсь. И есть проблемы, когда вы сбрасываете. Есть проблемы, которые могут возникнуть, но для меня это работает довольно хорошо. Итак, это моя личная рекомендация. Если вы не хотите его использовать, вам не нужно это делать. Но я считаю, что это делает мою жизнь намного проще.
Итак, если вы используете Google ‘CSS reset stylesheet’, вы должны создать целую кучу. Это выше из библиотеки интерфейса Yahoo, давайте перейдем к пуленепробиваемым объявлениям шрифтов.
Сначала мы начинаем нашу декларацию. Мы даем имя нашему семейству шрифтов, чтобы мы могли ссылаться на него позже. Мы даем это источник. Итак, мы говорим: «Вы можете найти наш EOT-файл…», и здесь есть определенный порядок, потому что разные браузеры (особенно Internet Explorer) имеют проблемы. Итак, сначала вам нужно дать ему вариант открытого типа. Затем нам нужно дать ему локальный вариант. И здесь есть две декларации. Итак, это если шрифт уже доступен локально.
Далее, мы даем веб-файл открытого шрифта. Итак, вы можете перечислить многочисленные шрифты здесь (что здорово, это облегчает жизнь), затем идут файлы OTF или TTF. И, наконец, мы делаем файлы SVG. И вы заметите, что в удостоверении есть хеш. Это связано с тем, что файлы SVG в буквальном смысле являются файлами XML, и вам нужно указывать, откуда в файле начинаются фактические данные.
Есть множество проблем, которые могут возникнуть, или подводные камни и проблемы, которые могут возникнуть. Итак, во-первых, важно отметить, что мы по существу имеем дело с отдельными файлами шрифтов одного и того же типа шрифта или одним и тем же семейством шрифтов для различных стилей шрифта. Так, например, у вас может быть шрифт с именем foobar, и есть foobar Regular, foobar Italic, foobar Bold и foobar Small Caps и так далее. Это может стать проблемой. Так, например, подумайте о таких элементах, как элементы HTML <strong> и <em> (выделение), стилизованные с установкой шрифта жирным шрифтом и курсивом соответственно.
Если мы объявим курсив через @ font-face так, как мы хотим получить стиль для нашего дизайна, то произойдет, если курсив будет выделен цифровым курсивом, поэтому он будет выделен вдвойне. Итак, он берет курсив, на который мы ссылались, но затем думает, что это нормальный вариант, и выделит его курсивом с помощью механизма рендеринга шрифтов. Итак, результатом являются все эти вещи. Итак, у нас есть маленькие столицы, которые вдвое меньше (поэтому они ультра-крошечные). И вы можете видеть здесь, он берет курсив, а затем наклоняет его. Это в цифровом виде курсивом. Это довольно отвратительно. И это, вероятно, испортит стилизацию предполагаемого дизайна многих ваших работ.
Если мы избегаем или перезаписываем различные объявления, такие как выделение, стиль шрифта нормальный и по какой-либо причине, наш определенный / предпочтительный шрифт @ font-face недоступен, мы фактически отбираем другие шрифты в стеке шрифтов из их стиля. Итак, представьте, что предпочитаемый вами эталонный файл шрифта недоступен, и вы перезаписали стиль шрифта для таких вещей, как полужирный или сильный, курсив или свойства <em> HTML, что произойдет, если эти элементы не будут стилизованы. Таким образом, это может стать довольно серьезной проблемой.
Итак, мы преодолеваем обе эти проблемы, устанавливая стили шрифта в объявлении @ font-face. Итак, мы должны сказать, если мы потянем курсив шрифта, что это курсив. И в буквальном смысле слова мы говорим: «Кстати, это курсив. Стиль шрифта этого шрифта выделен курсивом ».
Как я уже говорил ранее, вы заметите исходные объявления, которые были локальными. Почему у нас есть две местные декларации? Это связано с тем, что некоторые браузеры ссылаются на шрифты, используя имена постскриптов. Так что, если вам нужно найти название постскриптума вашей гарнитуры, вы можете найти его в FontBook под Mac, таким образом. Итак, просто откройте FontBook, который будет установлен на вашем Mac по умолчанию.
Существует также расширение свойств для Windows. Как правило, после его установки вы щелкаете правой кнопкой мыши, переходите к свойствам файла шрифта и нажимаете на вкладку имен, и вы видите всю информацию. И эта ссылка для скачивания находится по адресу: http://bit.ly/ms-font-prop (и ссылки также будут доступны позже), и, конечно, на бесплатных десктопах есть еще несколько инструментов.
При использовании @ font-face для автономных файлов нам необходимо учитывать две конкретные технические проблемы: одна из них связана с поднабором, а другая — со сжатием. Итак, я упоминал об этом раньше, и сейчас я подробно остановлюсь на них.
Подмножество — ну, это в буквальном смысле позволяет нам удалять заведомо неиспользованные глифы из файла шрифта, поэтому мы сокращаем размер файла. Например, если мы знаем, что нам никогда не понадобятся греческие символы на нашем веб-сайте, мы можем удалить их и, таким образом, уменьшить размер файла шрифта, поскольку в противном случае можно будет загрузить файл шрифта с греческими символами (который никогда не будет использоваться) , И таким образом мы уменьшаем размер загрузки страницы.
Подмножество может быть сделано в редакторе шрифтов. Редакторы шрифтов могут быть смехотворно дорогими. Итак, я бы рекомендовал просто взять Font Forge. Это отличный редактор шрифтов с открытым исходным кодом. И вы открываете свой шрифт, выбираете блоки символов, которые не используются, и удаляете их. Но, конечно, убедитесь, что вы сохраняете оригинальную резервную копию, потому что есть вероятность, что вы можете использовать этот шрифт для чего-то другого, и вам действительно нужны ваши греческие символы.
Избавь себя от головной боли. Я бы пропустил использование WEFT, проприетарного конвертера Microsoft и вместо этого использовал TTF2EOT. Почему? Поскольку WEFT будет использовать собственный алгоритм сжатия монотипов, а GZip исключительно лучше. WEFT работает только в Windows XP, и возникли проблемы при запуске его на виртуальной машине в других операционных системах. Так что это в некотором роде. И TTF 2 EOT, он не сжимает, поэтому вместо этого я рекомендую использовать сжатие GZip на стороне сервера.
И, конечно, онлайн-интерфейсы для обоих этих инструментов. Таким образом, вам не нужно брать инструменты командной строки, чтобы сделать это. Итак, есть сайты, которые сделают это для вас, и некоторые из них TTF2EOT на веб-сайте Sebastion Kippe. Там также исключительно удивительный шрифт
Белка шрифт генератор лица. Я очень рекомендую всем, кто работает с веб-шрифтами онлайн.
Итак, это скриншот того, как выглядит генератор. Таким образом, вы буквально нажимаете кнопку добавления шрифтов и загружаете файл шрифтов. Он скажет вам, сколько есть глифов, насколько они велики. И затем, вы можете перейти в простой режим или экспертный режим. И вы можете получить его, чтобы сгенерировать целую серию различных форматов шрифтов для вас для загрузки и затем, ссылки на ваш сайт.
Вы можете сделать подсказку. Вы можете удалить кернинг, если хотите. Вы можете выполнить базовое или пользовательское поднаборы (чтобы вырезать языки и диапазоны символов, которые вам не нужны). Вы можете использовать множество разных — это даст вам код для CSS. Итак, есть множество разных методов. И да, так что есть целый ряд отличных вариантов, и они сделают все это для вас.
Итак, компрессия. Для сжатия, давайте использовать Mod_GZip. Это использует веб-сервер Apache в файле .HTaccess. Итак, в буквальном смысле, мы в основном будем называть модуль if и модуль GZip. И мы в основном скажем: «Да! Включите его ». И что более важно, мы в основном присваиваем ему несколько типов файлов и говорим:« Мы хотим HTML. Мы хотим CSS. Мы хотим Javascript »и все, что мы хотим там. И затем, в конце, вы должны пойти OTF, EOT, SVG, WOFF или что-то еще.
И поскольку Microsoft является особенной и просто для того, чтобы убедиться, что все это работает, у нас есть специальная запись для конкретного поставщика, которая ссылается на объектный файл шрифта Microsoft. Итак, есть EOT и EOT-lite файлы.
Итак, это те вещи, на которые вы должны ссылаться.
Вы также можете использовать Mod Deflate вместо Mod GZip в .HTaccess. Кроме того, опять же, действительно довольно просто. Вы просто говорите: «Вот куча файлов, убедитесь, что вы их сжали». И все! Красиво и просто. И не удивляйтесь, увидев сокращение на 40% -50%. Так что это абсолютно стоит делать. Теперь, если у вас есть файл шрифта размером в сотню килобайт (что довольно много), не удивляйтесь, если его размер уменьшится до 50%. Итак, 50к или что-то. Так что, безусловно, стоит сделать. Это, конечно, если вы размещаете свои собственные вещи. Если вы пользуетесь услугой, вам не придется беспокоиться об этом.
Наконец, давайте также кешируем активы. Таким образом, мы в основном говорим браузеру: «Если вы снова посещаете эту веб-страницу, не беспокойтесь о повторной загрузке файла шрифта, потому что содержимое изменится, но шрифт не изменится». Здесь мы в основном говорим: «Если файлы совпадают, установите кэш для этих файлов на определенное количество», и я считаю, что в этом случае этот параметр был на месяц. Давайте вернемся к этому, чтобы вы могли видеть это правильно. Да, максимальный возраст — месяц (я полагаю, это в секундах).
Где мы можем найти шрифты? Есть множество хороших мест, чтобы выйти в интернет, чтобы найти бесплатные веб-шрифты. Прежде всего, я бы порекомендовал Open Font Library, которая является отличной библиотекой шрифтов с открытым исходным кодом. Существует Лига подвижного типа, которая в некоторой степени также связана с некоторыми из этих шрифтов с открытым исходным кодом. Таким образом, это шрифты, которые вы можете не только бесплатно загружать и использовать для любых целей, в которых они вам нужны, но также и вносить изменения, чтобы расширять их по своему желанию.
И еще, есть Font Squirrel, что тоже потрясающе. И есть список веб-шрифтов по этому адресу bit.ly. Это на вики webfont.info. Конечно, есть все различные сервисы, но я не буду перечислять их здесь, потому что я, вероятно, пропущу один или два, и я не хочу казаться, что я оказываю чрезмерную поддержку различным коммерческим сервисам. Итак, те, о которых я упоминал в этом выступлении, — это те, с которыми я сталкивался и использовал, но есть ряд других.
И это все на данный момент. Итак, вторая часть этого разговора придет на более позднем этапе. Спасибо, что присоединились ко мне для первого вебинара. Я надеюсь, что это было интересно и, возможно, помогло вам узнать одну или две вещи. Многие материалы этого вебинара я недавно освещал на сайте фестиваля дизайна. И если вы хотите узнать больше о типографии и веб-типографии, перейдите на сайт DesignFestival.com.