Типографика → Новая типографика для веба. Microsoft демонстрирует возможности OpenType
Microsoft опубликовала демо-страницу улучшенной типографики для формата OpenType. Это альтернативные глифы, лигатуры, кернинг, дроби, малые прописные и минускульные цифры. Эффекты видны, если наводить на текст мышкой. Демо хорошо работает только в браузерах с поддержкой OpenType, сама Microsoft рекомендует IE10+ и Firefox 8+. В других браузерах могут проявиться не все эффекты, это ещё зависит от операционной системы.
Альтернативные глифы и малые прописные
С Microsoft можно согласиться — OpenType действительно поднимает оформление текста в вебе на новый уровень, близкий к типографскому. Возможности этого формата явно превосходят @font-face.
Альтернативные глифы и малые прописные
С Microsoft можно согласиться — OpenType действительно поднимает оформление текста в вебе на новый уровень, близкий к типографскому. Возможности этого формата явно превосходят @font-face.
Каскадные Таблицы Стилей → Загрузка векторных значков через @font-face: за и против
С помощью @font-face вы можете загружать значки (иконки) не в виде PNG или GIF, а внедрить внутрь шрифта и подгрузить пользователю через директиву @font-face. CSS3 позволяет поворачивать такие значки, добавлять тени или даже анимированные эффекты с плавным изменением цвета при наведении курсора мыши (раньше такое было возможно только на Flash).
Вот здесь инструкция по использованию набора шрифтов IconPack (.eot, .woff, .ttf, .svg) и загрузке значков с помощью псевдо-элемента
Вот здесь инструкция по использованию набора шрифтов IconPack (.eot, .woff, .ttf, .svg) и загрузке значков с помощью псевдо-элемента
:before и тега span.<style>
.staricon {
font-family: 'IconPack';
}
.staricon:before {
content: 'a';
}
.show {
display:block;
}
.hide {
display:none;
}
</style>
<div class="staricon">
<span class="show">star</span>
</div>Типографика → Typekit приобретён Adobe
3 октября 2011 года сервис Typekit, бизнес которого построен на платном предоставлении доступа к коммерческим шрифтам для оформления сайтов в Паутине при помощи директивы Следует заметить, что Adobe и без того можно было причислить к интернетовским шрифтоторговцам; просто в их коллекции Adobe Web Fonts число шрифтов перевалило за пару сотен, тогда как Typekit торгует тысячами. Полезно сопоставить это с количеством шрифтов в коллекции Adobe Type Library, которые продаются для внеинтернетовского употребления — число их превосходит 2300.
Drupal → Drupal + Ajax + Свои шрифты + Flash + PNG = кроссбраузерный сайт из песочницы
Недавно, передо мной была поставлена задача разработать сайт на Drupal с использованием весомого Flash, фирменных шрифтов и PNG-графики так, чтобы всё это одинаково отображалось в офисных IE6 и других более популярных браузерах. Со всеми технологиями, я работал давно, но и предположить не мог, что всё вместе окажется одной большой головной болью. Но миллион разных частных решений таки привёл меня к общему решению этого длинного уравнения. О чем и собираюсь рассказать в сей статье.
Типографика → Новый пуленепробиваемый синтаксис @font-face
С самого начала «вебошрифтовой революции» мы полагались на неизящные хаки деклараций @font-face, чтобы шрифты из Паутины загружались во всех браузерах. Может ли существовать лучший путь? Вполне изящный и совместимый с будущими браузерами?
Вкратце об истории вопроса
В сентябре 2009 года Пол Айриш (Paul Irish) огласил пуленепробиваемый синтаксис для записи деклараций
Синтаксис 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');
}
Что? Я не понял.
Как это срабатывает
Типографика → Двадцатка лучших веб-шрифтов
Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов
Без преувеличения, сейчас сетевая типографика переживает захватывающий период своей жизни. Недавние технологические скачки приблизили нас еще на шаг ближе к типографической нирване в интернете. Шаг, которого все так долго ждали.
Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.
Веб-разработка → Веб-шрифты на распутье
Перевод не претендует на 100%-ную точность, но я постарался максимально точно передать мысли и слог автора. Комментарии приветствуются.
Начиная с Интернет Эксплорера 4 в 1998-ом, а затем с марта 2008-ого и до марта 2010-ого, один за другим, вся «большая пятерка» десктопных браузеров — Сафари, Файрфокс, Опера и Хром — выкатили сравнительно похожие реализации правила
Для начала, обзор последних событий:
Теперь пройдемся по пунктам…
Начиная с Интернет Эксплорера 4 в 1998-ом, а затем с марта 2008-ого и до марта 2010-ого, один за другим, вся «большая пятерка» десктопных браузеров — Сафари, Файрфокс, Опера и Хром — выкатили сравнительно похожие реализации правила
@font-face для привязки шрифтов. Вместе с тем, неотъемлимая часть веб-издательского паззла, часть, которой не хватает с начала Веба, встала на место и теперь настоящая, веб-ориентированая типографика начинает принимать форму.Для начала, обзор последних событий:
- 18-ого марта 2010 года была учреждена группа Web Fonts Working Group в W3C. Её первая задача была утвердить спецификацию WOFF как стандарт доставки sfnt (OTF и TTF) шрифтов в веб в «сжатом» виде.
- Была представлена отрисовка шрифтов в IE9 с помощью Windows’s DirectWrite в IE9 Platform Preview.
- Появились первые инструменты для подготовки веб шрифтов, такие как Font Squirrel’s @Font-Face Generator и EOTFAST.
- Пошла новая волна «шрифтохранилищ» в виде Typekit, Typotheque и бесплатного, опенсорсного Kernest.
- Появились первые “трастовые/кредитные” лицензии на веб-шрифты от дизайнеров коммерческих шрифтов.
- CSS3 Fonts Module включил в себя некоторые продвинутые свойства OpenType.
- Adobe Flash, когда-то надежная, кросс-платформенная среда замены текста (sIFR), сейчас выглядит абсолютно убогой.
- Google запустил бесплатный сервис шрифтов с растущей библиотекой. Все шрифты в библиотеке доступны и для частного хранения/использования.
Теперь пройдемся по пунктам…
Веб-разработка → Прикручиваем клевые шрифты с помощью @font-face
Недавно столкнулся с задачей прикручивания достаточно необычного шрифта для мобильного веб клиента. Так как работа была под айфон, то я решил, что в этой задаче мне поможет css 3 и такая штука как @font-face. Пользу от такого способа решения задачи, я думаю, видят все, потому что:
- сохраняется поиск по тексту, потому что это текст, а не картинка;
- появляется возможность использовать онлайн-переводчики и разные фишки связанные с текстом;
- никто не отменяет для нас использование line-height, letter-spacing, text-shadow,text-align, и селекторов вида ::first-letter и ::first-line
Веб-разработка → Google представил API для кроссбраузерного подключения шрифтов
Google Font API — API для подключеня нестандартных шрифтов.
<html>
<head>
<link rel="stylesheet" type="text/css" href="_http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>
Типографика → «ПараТайп» выпустил обновлённую версию гарнитуры PT Sans (также доступны её версии в форматах EOT и WOFF)
Многие помнят, как в конце прошлого года мы тут порадовались появлению паратайповского бесплатного шрифта PT Sans, содержащего все символы кириллических алфавитов народов России, а также буквы имперской письменной речи («ѣ», «ѵ», «і», «ѳ»).
В начале апреля (частью следуя просьбам пользователей, частью руководствуясь собственными намерениями) паратайповские шрифтовики внесли ряд важных улучшений, о которых и сообщают на своём сайте и во блоге LiveJournal.
Не стремясь копипастить полный список их, ограничусь подчёркиванием только трёх обстоятельств, которые показались значимыми лично мне.
Во-первых, помимо простого набора шрифтов, для скачивания теперь предлагают особыйWeb-набор, содержащий версии всех шрифтов этой гарнитуры в форматах EOT (для браузера IE) и WOFF (для Файерфокса, например). В том же архиве лежит готовый пример (HTML+CSS) использования этих шрифтов, причём я проверил и убедился, что пример вполне соответствует той полезной рекомендации, которую Пол Айриш (Paul Irish) составил.
Во-вторых, полностью перехинтованы полужирные начертания (теперь они выглядят заметно иначе; лично мне кажется, что теперь они жирнее).
В-третьих, появились символы, которых недоставало для поддержки эсперанто (а значит, и белорусам новая версия этого шрифта пригодится), добавлен «неразрывный» дефис, изменили начертание немецкого эсцета и поправили русскую «ы».
Кернинг сочетания «*.*» продолжает в этом шрифте оставаться ужасным, но в остальном развитие шрифта заслуживает громких и искренних апплодисментов.
В начале апреля (частью следуя просьбам пользователей, частью руководствуясь собственными намерениями) паратайповские шрифтовики внесли ряд важных улучшений, о которых и сообщают на своём сайте и во блоге LiveJournal.
Не стремясь копипастить полный список их, ограничусь подчёркиванием только трёх обстоятельств, которые показались значимыми лично мне.
Во-первых, помимо простого набора шрифтов, для скачивания теперь предлагают особый
Во-вторых, полностью перехинтованы полужирные начертания (теперь они выглядят заметно иначе; лично мне кажется, что теперь они жирнее).
В-третьих, появились символы, которых недоставало для поддержки эсперанто (а значит, и белорусам новая версия этого шрифта пригодится), добавлен «неразрывный» дефис, изменили начертание немецкого эсцета и поправили русскую «ы».
Кернинг сочетания «*.*» продолжает в этом шрифте оставаться ужасным, но в остальном развитие шрифта заслуживает громких и искренних апплодисментов.