войти зарегистрироваться

ТипографикаДизайн сайта Open Font Library переменился

Внешний вид сайта openfontlibrary.org, созданного Libre Font Fund для хранения и распространения свободных шрифтов (прежде всего в интересах пользователей TeX, но также и в интересах общественного блага), обрёл в последний год существенные изменения. Также изменились элементы его внутреннего устройства, наполнения и функционирования — всё то, что мы называем дизайном.

Прежде на сайте были просто списки шрифтов, а теперь они стали функционально сложнее и полезнее.

Заметно прежде всего, что название каждого шрифта теперь отображается самим же этим шрифтом. (К сожалению, при этом используется сырой шрифт в формате TTF или OTF. Формат WOFF был бы примерно вчетверо меньше по объёму, способствуя более экономному скачиванию шрифтов, более быстрому отображению названий.)

Для каждого из шрифтов появилось тестовое поле, позволяющее набрать произвольный текст и поглядеть (прямо на сайте), как он будет выглядеть. В отличие от сайта Typekit, на котором у меня в тестовом поле не заработал русский текст, Open Font Library позволяет тестировать кириллицу невозбранно. К сожалению, недостаёт такого ползунка или выпадающего списка, который позволил бы контролировать размер шрифта — а меж тем было бы полезно проверять шрифты не только в крупном размере (в котором наилучшим образом видны очертания шрифта), но также и в небольшом (для оценки пригодности шрифта к оформлению основного текста сайтов).

ТипографикаПример ≈двукратного ускорения загрузки шрифта для заголовков из Google Web Fonts, осуществляемого выборкою оптимальной версии его

[иллюстрация-скриншот]Если на сайт вики-энциклопедии «Циклопедия» забредёт пользователь компьютера, оснащённого современным программным обеспечением Корпорации Microsoft, то тогда взгляд его прежде всего окажется привлечён шрифтом заголовков первого и второго уровня («Циклопедия», «Культура», «Общество», «Наука и техника», «Природа и человек», «Быт»): такой шрифт нынче не часто встречается во Всемирной Паутине (это вы можете без труда смекнуть и самостоятельно, когда сравните фрагмент скриншота, мною справа для того приложенный, с собственным вашим опытом).

Но этот шрифт, господа, да станет всем нам примером того, как не следует оформлять наши заголовки. А угадаете ли, почему это так? Да потому, что шрифт этот — Candara (и это нетрудно увидать воочию: достаточно прибегнуть к расширению «Context Font» или вглядеться в нынешний вики-код заглавной страницы Циклопедии и её подшаблона «Раздел»). Некоторые из нас ужé знают или хотя бы догадываются (а другим достаточно взглянуть в Википедию, чтобы узнать) о том, что Candara — это шрифт эксклюзивный, который встречается только в сравнительно недавних продуктах Корпорации Microsoft, таких как последние Windows (Vista, Windows 7) и Office 2007, да ещё раздаётся в составе Microsoft Powerpoint Viewer 2007 и Microsoft Office Compatibility Pack (в том числе для более ранних систем — для Windows XP, для Windows 2000). Если же на такой сайт забредёт читатель с Линуксом, или Маком, или Андроидом, или Айфоном, или Айпадом — то тогда, сами понимаете, «Кандару» взять ему будет неоткуда — и вид заголовка поневоле станет далеко отличаться от желаемого.

А ведь можно обеспечить единообразное отображение заголовка во всех системах и браузерах; для этого достаточно попросту отгрузить всем читателям один и тот же шрифт. Шрифт можно раздавать с собственного же сайта (добавив продуманные правила @font-face в свой CSS), а можно воспользоваться услугами внешнего хостинга шрифтов — например, услугами коллекции свободных и бесплатных шрифтов «Google Web Fonts», чей красивый новый интерфейс обсуждали на Хабрахабре в конце июня. О ней-то и поговорим под хабракатом.

Что следует сказать по поводу употребления Google Web Fonts при оформлении заголовков?

Блог компании MicrosoftHTML5 Camp: опубликована окончательная версия программы мероприятия

image

Привет, Хабр!

Очень приятно отметить тот факт, что конференция вызвала большой интерес — регистрацию пришлось закрыть через два дня после начала. Жаль, что многим желающим пришлось отказать, но для них мы постараемся сделать как можно более качественную и содержательную онлайн трансляцию, которую можно будет посмотреть 17 февраля в 10:00 (мск) прямо на Хабре. В этот раз мы больше не заставим вас в перерывах смотреть скучную заставку – паузы мы заполним интервью с участниками конференции.

Теперь поговорим о новостях. Окончательно утверждена программа мероприятия. Свое участие подтвердили JoyBits Ltd., авторы одного из самых популярных приложений для Windows Phone 7. Николай Котляров расскажет об опыте перевода Doodle God в HTML5.

Для разминки перед мероприятием предлагаю пройти тест на знание стандартов. Тем более там еще и призы дают.

Под катом полная программа мероприятия

ТипографикаНовый пуленепробиваемый синтаксис @font-face

С самого начала «вебошрифтовой революции» мы полагались на неизящные хаки деклараций @font-face, чтобы шрифты из Паутины загружались во всех браузерах. Может ли существовать лучший путь? Вполне изящный и совместимый с будущими браузерами?

Вкратце об истории вопроса


В сентябре 2009 года Пол Айриш (Paul Irish) огласил пуленепробиваемый синтаксис для записи деклараций @font-face. Синтаксис был компактным и в то время действовал во всех браузерах. Недавно стали поступать, со временем усиливаясь, жалобы на отказ шрифтов загружаться в Android — поэтому мы стали вместо того рекомендовать синтаксис «Mo' Bulletproofer», сочинённый Ричардом Финком (Richard Fink). К сожалению, синтаксису «Mo' Bulletproofer» требуется двойная запись деклараций, так что поддержка его сложнее.

Синтаксис Fontspring @Font-Face


А вот таким этому коду следовало бы быть с самого начала. Чистым, ясным и простым:
@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

Что? Я не понял.


Хак Трюк, заставляющий этот код заработать — символ «?» вслед за именем файла EOT. Без шуток.

Как это срабатывает


Блог компании MicrosoftHTML5 Camp — конференция о будущем веба



Все активнее обсуждается будущее веба и перспективы развития браузеров и веб-стандартов в частности. Стандарты веба, надо сказать, в последнее время очевидная горячая тема, а теперь даже возникли разногласия в названии этих самых стандартов.

Пожалуй, самое время встретится и пообщаться на тему последних событий, а также обсудить возможный пути развития веба.

17 февраля в Москве, в информационно-выставочном центре «Инфопространство» пройдет HTML5 Camp. Участие в мероприятии бесплатное. Зарегистрироваться можно на сайте. Количество мест ограничено, спешите зарегистрироваться.

Под катом подробности и программа мероприятия.

Веб-разработкаВеб-шрифты на распутье

Перевод не претендует на 100%-ную точность, но я постарался максимально точно передать мысли и слог автора. Комментарии приветствуются.

Начиная с Интернет Эксплорера 4 в 1998-ом, а затем с марта 2008-ого и до марта 2010-ого, один за другим, вся «большая пятерка» десктопных браузеров — Сафари, Файрфокс, Опера и Хром — выкатили сравнительно похожие реализации правила @font-face для привязки шрифтов. Вместе с тем, неотъемлимая часть веб-издательского паззла, часть, которой не хватает с начала Веба, встала на место и теперь настоящая, веб-ориентированая типографика начинает принимать форму.

Для начала, обзор последних событий:
  1. 18-ого марта 2010 года была учреждена группа Web Fonts Working Group в W3C. Её первая задача была утвердить спецификацию WOFF как стандарт доставки sfnt (OTF и TTF) шрифтов в веб в «сжатом» виде.
  2. Была представлена отрисовка шрифтов в IE9 с помощью Windows’s DirectWrite в IE9 Platform Preview.
  3. Появились первые инструменты для подготовки веб шрифтов, такие как Font Squirrel’s @Font-Face Generator и EOTFAST.
  4. Пошла новая волна «шрифтохранилищ» в виде Typekit, Typotheque и бесплатного, опенсорсного Kernest.
  5. Появились первые “трастовые/кредитные” лицензии на веб-шрифты от дизайнеров коммерческих шрифтов.
  6. CSS3 Fonts Module включил в себя некоторые продвинутые свойства OpenType.
  7. Adobe Flash, когда-то надежная, кросс-платформенная среда замены текста (sIFR), сейчас выглядит абсолютно убогой.
  8. Google запустил бесплатный сервис шрифтов с растущей библиотекой. Все шрифты в библиотеке доступны и для частного хранения/использования.

Теперь пройдемся по пунктам…

Internet ExplorerInternet Explorer 9: наиболее полное руководство разработчика (и не только), часть 4

что еще нового в IE9 PP3, кроме canvas и video? Огромное описание, масса картинок.

HeaderLeft[1]

23 июня строго по графику (период 8 недель) вышла третья тестовая сборка IE9. На Хабре уже успели написать про этот релиз и в самых общих словах обрисовать нововведения. Кроме того, тут же на Хабре успели сравнить производительность canvas в IE9 и Chrome.

Этот пост раскроет значительно больше деталей третьей тестовой версии Internet Explorer 9 и расскажет о нововведениях в браузер, которые будут важны для разработчиков.

Это четвертая статья из серии статей про нововведения в IE9 для разработчиков. Ознакомится с предыдущими частями можно здесь: часть 1 (CSS3, HTML5, DOM), часть 2 (SVG, GPU), часть третья (профили ICC, форматы изображений, Javascript).

ТипографикаОбновились свободные шрифты Linux Libertine, Linux Biolinum, а также некоторые из шрифтов Arkandis Digital Foundry

На Linux.org.Ru во блогозаписи «Эпидемия свободных шрифтов» рассказывают о том, что в этом году вышло обновление сразу нескольких свободных (открытых, бесплатных) шрифтов.

Прежде всего это гарнитура «Linux Libertine» (задуманная как аналог «Times New Roman» по размерам символов), и с нею доступная на том же сайте для скачивания в том же наборе файлов гарнитура «Linux Biolinum».

Также обновились сразу несколько свободных гарнитур Arkandis Digital Foundry (это «Berenis-Pro», «Gillius Collection» и «Tribun-Std»), а также шрифт «SwitzeraADF» (он выложен на странице доработок, так как не был с нуля разработан в Arkandis, а является доработкою шрифта «Vera Sans»).

Автор ЛОРовской блогозаписи полагает, что все эти шрифты предназначены скорее для использования в печатаемых документах, нежели в элементах интерфейса приложений. Мне его суждение представляется, однако, слишком категорическим: гарнитура «Linux Libertine» кажется готовою для Паутины, да и гарнитура «Linux Biolinum» вполне сгодилася бы для сайтов, кабы только кернинг у ней был в порядке. Также, по-видимому, в Arkandis полагают их гарнитуру «Berenis-Pro» пригодною к употреблению на сайтах, коль скоро прикладывают её вариант в формате WOFF в том же архиве для скачивания, что и OTF.

Лично меня немало порадовало присутствие в «Linux Libertine» и в «Linux Biolinum» букв добольшевицкой кириллицы («ѣ», «ѵ», «і», «ѳ»), а вот гарнитура «Berenis-Pro» вообще для русского языка менее чем пригодна, оттого что она не просто не содержит букв наших, но и заполнена вместо них пробелами.

Internet ExplorerInternet Explorer 9: наиболее полное руководство разработчика (и не только), часть 3

HeaderLeft[1]
Это третья часть руководства по нововведениям в браузере IE9. В первой части я рассмотрел поддержку стандартов CSS, HTML5, DOM, вторая часть была посвящена реализации в IE9 технологии SVG. В третьей завершающей части я расскажу про поддержку в IE9 нового стандарта веб-шрифтов WOFF, ICC-профилях, форматов TIFF и JPEG XR, изменениях в Javascript-движке, инструментах разработчика и об интерфейсе пользователя в IE9.

Типографика«ПараТайп» выпустил обновлённую версию гарнитуры PT Sans (также доступны её версии в форматах EOT и WOFF)

Многие помнят, как в конце прошлого года мы тут порадовались появлению паратайповского бесплатного шрифта PT Sans, содержащего все символы кириллических алфавитов народов России, а также буквы имперской письменной речи («ѣ», «ѵ», «і», «ѳ»).

В начале апреля (частью следуя просьбам пользователей, частью руководствуясь собственными намерениями) паратайповские шрифтовики внесли ряд важных улучшений, о которых и сообщают на своём сайте и во блоге LiveJournal.

Не стремясь копипастить полный список их, ограничусь подчёркиванием только трёх обстоятельств, которые показались значимыми лично мне.

Во-первых, помимо простого набора шрифтов, для скачивания теперь предлагают особый Web-набор, содержащий версии всех шрифтов этой гарнитуры в форматах EOT (для браузера IE) и WOFF (для Файерфокса, например). В том же архиве лежит готовый пример (HTML+CSS) использования этих шрифтов, причём я проверил и убедился, что пример вполне соответствует той полезной рекомендации, которую Пол Айриш (Paul Irish) составил.

Во-вторых, полностью перехинтованы полужирные начертания (теперь они выглядят заметно иначе; лично мне кажется, что теперь они жирнее).

В-третьих, появились символы, которых недоставало для поддержки эсперанто (а значит, и белорусам новая версия этого шрифта пригодится), добавлен «неразрывный» дефис, изменили начертание немецкого эсцета и поправили русскую «ы».

Кернинг сочетания «*.*» продолжает в этом шрифте оставаться ужасным, но в остальном развитие шрифта заслуживает громких и искренних апплодисментов.