Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

WebKit теперь понимает @font-face

Safari
В последней ночной сборке (скачать) KHTML-движка WebKit (который используется в Safari) появилась поддержка правил @font-face, так что Opera, — ранее единственный браузер (со своим движком), поддерживающий эти правила, — теперь не одинока. Это означает, что в WebKit теперь появилась необходимая функциональность для загрузки шрифтов, обозначенных в CSS.

В веб-дизайне всегда была проблема, связанная с ограничениями в выборе шрифтов, которые можно использовать. Теперь с помощью @font-face безопасные шрифты можно использовать в WebKit — это позволит веб-дизайнерам использовать шрифты, которые браузер будет скачивать из Сети, чтобы отображать текст уже с их применением. Конечно, при этом у веб-дизайнера (ну или у его заказчика) должны быть права на распространение этих шрифтов.

Кстати, вполне возможно, что Apple добавит эту сборку в Leopard, который вот-вот должен пойти в печать.

PS: Если вам интересно почитать об использовании, то вам стоит почитать эту статью на A List Apart.
Всего голосов 11: ↑9 и ↓2 +7
Просмотры 2.4K
Комментарии 2

Подгружаемые шрифты в HTML — мечта или реальность?

Типографика *
Многие согласятся, что стандартных Arial, Times, Verdana и т.д. зачастую не хватает.
Тут на помощь вроде как должен прийти css правило @font-face, которое позволяет использовать свой шрифт. Но к сожалению нормальной поддержки браузерами нет. В качестве теста можно использовать http://www.alistapart.com/d/cssatten/stef.html.
Реалии поддержки @font-face и возможные альтернативы
Всего голосов 15: ↑10 и ↓5 +5
Просмотры 3.7K
Комментарии 19

@font-face в Firefox

CSS *
Сотрудник Mozilla, Джон Даггет подготовил сборку Firefox’а с поддержкой @font-face из спецификации CSS3 (часть «web font»). На данный момент она доступна только для Windows и Mac — для Linux пока нет. Есть нюансы которые описаны в комментарие на баг 70132, один из которых заключается в том, что по умолчанию скачиваются лишь те шрифты, что располагаются на просматриваемом сайте (домене), что бы исправить это нужно оключить опицию gfx.downloadable_fonts.same-site-origin.enabled на странице about:config.

Для тех, кто не знает эта вещь из CSS позволяет разработчику задавать на сайте тот шрифт, который ему нужен
Читать дальше →
Всего голосов 34: ↑30.5 и ↓3.5 +27
Просмотры 1.9K
Комментарии 28

Полезная информация со встречи с Хоконом в Петербурге

Opera
Вчера прошла встреча с Хоконом Ли — отцом CSS, технических директором Opera Software и YesLogic Pty Ltd (princexml). Было сказано много информации, которую я как, вероятно, и многие из вас знаем, поэтому постараюсь выделить что-то действительно полезное
  • Почему Dragonfly лучше Firebug
  • @face-font в Опере (доступен эсперементально)
  • Почему Оперы нет на iPhon'е
  • Популиризация ogg с помощью p2p, пиратов и Opera
  • Следующая встреча
Читать дальше →
Всего голосов 31: ↑28 и ↓3 +25
Просмотры 441
Комментарии 30

В Опере будет свой рендеринг шрифтов с отличным сглаживанием?

Opera
Тестируя экспериментальную сборку Оперы с поддержкой @font-face, я почуствовал неладное- обычные шрифты в ней выглядят непривычно. Действительно ли это собственная система сглаживания или какое-то особое использование ClearType? Первый вариант правдоподобней по следующим причинам:
  1. Для установки шрифтов в систему нужны администраторские привелегии — собственная система рендеринга шрифтов решает эту проблему, причём на всех системах сразу.
  2. Знаю про Mac, не знаю про Linux, про Windows могу заметить что ClearType ужасен. Раз уж Опера может отрисовать шрифты, то почему бы ей самой их не сгладить?
  3. Шрифты не отображаются одинаково во всех системах
  4. Не PC устройства на которые нацелена Опера, как я понимаю, вообще не имеют сглаживания
Что бы проверить догадки я отключит системное сглаживание, посмотрел как выглядят шрифты без него в Опере 9.51, IE6, и сборке opera_wingogi_acid3 и с ним. При переключение браузеры перезагружал.
Читать дальше →
Всего голосов 63: ↑59 и ↓4 +55
Просмотры 1.4K
Комментарии 68

Прекрасные шрифты посредством @font-face

CSS *
Перевод
Tutorial
Хотя Firefox 3.0 улучшил отображение шрифтов, привнеся поддержку кернинга, лигатур, различных толщин, а также поддержку отображения сложных начертаний, всё же авторов ограничивало использование в своих дизайнах только общедоступных шрифтов. Firefox 3.5 снимает это ограничение, вводя поддержку CSS-правила @font-face это способ прицеплять шрифты TrueType и OpenType точно так же, как нынче прицепляют код и иллюстрации. Браузер Safari поддерживал этот вид гиперсвязи со шрифтом, начиная от версии 3.1, а в Opera объявили, что планируют поддержать его в Opera 10.

Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство @font-face задаёт используемое имя шрифтового семейства, и подгружаемый шрифтовой ресурс, и стилевые характеристики заданного начертания — скажем, полужирное ли оно, курсивное ли. Firefox 3.5 скачивает шрифты только по мере нужды, так что стилевой файл может задать полный набор шрифтов, из которых лишь выборочно несколькие станут использоваться в действительности.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

Браузеры, поддерживающие @font-face, отобразят текст при помощи Graublau Sans Web, тогда как более старые браузеры отобразят его при помощи либо Lucida Grande, либо начертания по умолчанию для sans-serif. Вот пример:

[Grumpy Grandpas!]
больше примеров, больше иллюстраций
Всего голосов 107: ↑94 и ↓13 +81
Просмотры 142K
Комментарии 37

Раздобываем бесплатные шрифты для русского языка, чтобы пережить Вторую типографскую революцию в Паутине

Типографика *
На минуту обратите свои мысли вспять, к прошлому, к завершившемуся тысячелетию. Отдайте должное утренней заре Всемирной Паутины, потому что заря эта готова ужé окончательно потухнуть, уступая место куда более яркому сиянию нового дня.

Первая типографская революция произошла во Всемирной Паутине настолько давно, что приходится производить поиски, чтобы установить подробности. Кажется достоверным то, что пишет Ian Graham: в Netscape Navigator 2.0 впервые появился элемент <font> (тогда он позволял задавать только размеры шрифта, и только в условных единицах), а в Internet Explorer 3 у этого элемента появился атрибут face, позволявший задавать начертание, задавать шрифтовое семейство. Википедия подсказывает, что Netscape Navigator 2.0 появился в марте 1996 года, а Microsoft Internet Explorer 3 — в августе того же года. В язык HTML версии 3.2 даже не входил атрибут face, хотя и упоминалося, что такой атрибут существует.

Тринадцать лет назад.

Все эти тринадцать лет для начертания текста сайтов в основном использовались несвободные шрифты, являющиеся частью операционных систем и офисных пакетов. Сайтам приходилося гадать о том, какие шрифты установлены у читателя, а какие не установлены, и какова вероятность того или другого, какие шрифты можно считать безопасными. Сочинялись специальные плагины jQuery и создавались специальные страницы, способные выяснить набор шрифтов на компьютере читателя. Особый дух того времени прекрасно передал despoth, сочинив превосходную серию статей о такой веботипографике, которая основана именно на подборе несвободных шрифтов (часть I часть II часть III часть IV часть V).

Наконец, это время кончилось: явствуют, зримо явствуют признаки Второй типографской революции, связанной с приходом @font-face.

Джон Даггетт сочинил познавательную статью о том, как все мы совсем скоро (после появления Safari 3.1, Firefox 3.5, Opera 10) сможем использовать загружаемые шрифты во всех популярных браузерах, а не только в одном наиболее популярном.

Марк Пилгрим грубо обрисовал ситуацию с лицензированием собственнических шрифтов. Ситуация эта немало напоминает глухой тупик. Даже создателям прекрасной демонстрации возможностей Firefox 3.5, чтобы изготовить страницу, пришлось специально связаться со шрифтопроизводителями и изготовлять такие особые (усечённые) версии использовавшихся шрифтов, чтобы их не было смысла копировать нелицензионно. А вон там предлагают раздавать особые паутинные обкусанные ужатые копии купленных шрифтов (которые сам покупатель вывешивать не имеет никого права, а только ссылаться). Остроумно. Открывает широкую дорогу в сторону Большого Брата: типа как недавно читальники Kindle удаляли книги Оруэлла за нелицензионность (даже честно купленные — просто оставляя стоимость их на счету покупателя в уплату). Так и тут. Внешний шрифт может неожиданно подохнуть, даже купленный заранее.

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

Англоязычному люду этот переход дастся достаточно просто: достаточно обратиться к белке-шрифтелке, чтобы получить буквально сотни шрифтов, каждый из которых можно без лицензионных проблем использовать в своей работе, на своём сайте. Тем же, кто пользуется русским языком (или, тем паче, другими языками на основе расширенной кириллицы), придётся гораздо, гораздо похуже. Свободных кириллических шрифтов совсем мало, а русского аналога белки-шрифтелки, похоже, вообще не существует в природе.

Я собираюсь поэтому перечислить прямо тут все свободные шрифты, подходящие для использования на сайтах, написанных по-русски. Не стесняйтеся дополнять мой список.

Список пошёл.
Всего голосов 160: ↑137 и ↓23 +114
Просмотры 32K
Комментарии 85

Шрифты «за изгородью»: форматы EOT Lite и WebOTF

Типографика *
В начале августа были все основания полагать, что будущее типографики в Паутине подлежит скорому и безжалостному выбору между двумя несовместимыми крайностями:
  • С одной стороны — реализованные во браузерах Firefox и Opera (а в скором будущем — также и во Chrome) ничем не прикрытые форматы TTF и OTF, которые прекрасно подходят для распространения свободных или хотя бы бесплатных шрифтов, но которые приводят любого правоторговца в ужас и остолбененение, так как позволяют лёгким мановением руки скачать любой такой шрифт и поставить себе в систему невозбранно. Соответственно, для выкладывания собственнических коммерческих шрифтов такие форматы не годятся.
  • С другой стороны — понимаемый в Internet Explorer формат EOT (Embedded OpenType), с патентованным механизмом сжатия, с DRM-полями для привязки шрифта к одному и только одному домену Интернета, на сайтах вне которого шрифт вообще не должен употребляться. Соответственно, прекрасная защита так называемой интеллектуальной собственности, зато дичайшие проблемы с лицензированием технологии и с кросс-платформенной её переносимостью.
Вопиющий антагонизм этих двух крайностей побуждал к радикальному отказу от собственнических шрифтов и к представлению о скорой погибели всякой коммерческой словолитни. Просто потому, что свобода лучше, чем несвобода.

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

Таких форматов появилось две штуки — EOT Lite и WebOTF. И разработан даже особый патч для Файерфокса, который добавляет во браузер поддержку их обоих.

Формат EOT Lite поддерживает крупная шрифтоторговая корпорация Ascender, в рекламных целях изготовившая некоторое забавное подобие пивной этикетки:

[EOT Lite]

Что гораздо важнее, Ascender планирует именно в этом формате продавать многие свои шрифты (а также некоторые чужие).

У формата EOT Lite есть заметное, существенное достоинство: это подмножество стародавнего майкрософтовского EOT, получающееся отказом и от жёсткой привязки к домену, и от собственнического алгоритма сжатия шрифтов. Следовательно, этот формат — пускай и оформившийся только в нынешнем году, причём сравнительно недавно — тем не менее поддерживался Корпорацией Microsoft давным-давно, начиная от версии Internet Explorer 4. Так что этот формат станет невозбранно работать во всех нынешних версиях популярнейшего (майкрософтовского) браузера. А вышеупомянутый патч для Файерфокса, несомненно, обеспечит поддержку EOT Lite и в будущих версиях второго по популярности браузера. Поэтому я согласен с тем мнением, которое Пол Айриш высказал в его подробном развёрнутом анализе нынешней ситуации с вебошрифтами: именно EOT Lite сейчас представляется наилучшим выбором формата собственнических шрифтов для Паутины.

А формат WebOTF получился в итоге слияния двух сравнительно новых предложений (ZOT для сжатия и .webfont для метаданных). Поэтому формат WebOTF предполагает преобразование .OTF-файла методом отдельного сжатия каждой таблицы шрифта путём пропускания её через функцию compress2() из библиотеки zlib. Соответственно, сжатием экономится траффик; и он сэкономится ещё более, если браузеру нужна не каждая таблица, так как тогда он сможет выборочно скачивать их с сервера: размеры и положение (offset) таблиц содержатся в заголовке WebOTF. В конец файла также ещё добавляются XML-метаданные о правах (хотя принуждение к соблюдению указанных там ограничений не предусматривается), а также некоторые двоичные данные (которыми правоторговцы могут помечать файл для дальнейшей идентификации покупателя по файлу, например). Многие правоторговцы склонны поэтому поддержать этот формат с превеликою готовностию; однако отсутствие широкой браузерной поддержки делает его будущее весьма мрачным, мне кажется. Бесперспективняк.

Однако закончу я на радостной ноте, и даже, если угодно, практически полезной ноте. Вышеупомянутый Пол Айриш измыслил краткий джаваскрипт, позволяющий выяснить, есть ли во браузере поддержка @font-face. Кому надобно, пользуйтеся.
Всего голосов 17: ↑7 и ↓10 -3
Просмотры 1.8K
Комментарии 3

Проблема «вспышки нестилизованного текста»

Типографика *
Перевод
Оригинальное название статьи, «Designing for the switch» содержит игру слов и говорит а) о разработке дизайна в эпоху перемен — перехода к нормальной поддержке подгружаемых шрифтов у всех пользователей, и б) о нюансе «моргания», смены шрифта при его подгрузке с помощью @font-face. Вообще говоря, на русском языке достаточно мало информации об опыте и нюансах использования @font-face, поэтому этим переводом я предлагаю начать генерировать более-менее содержательное информационное поле на эту тему. Heath

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

Да, мы были избалованы. Чтобы использовать Вердану, Джорджию или Камбрию, нам не приходилось думать.

Однако дизайнерам долгое время казалось, что им нужно большего. Мы хотим использовать любой шрифт, который нужен нам для нашего дизайна. Мы много нехорошего натворили, пытаясь достигнуть этой цели — например, помещали текст в картинку. Люди поумнее придумали вспомогательные инструменты типа sIFR или Cufón. С совсем недавнего времени большинство браузеров поддерживает @font-face. Плотина открывается. Это рассвет новой эры веб-типографики, и мы обязаны ступать в неё с осторожностью.

И как же это сделать?
Всего голосов 35: ↑31 и ↓4 +27
Просмотры 3.1K
Комментарии 17

Встраиваемые шрифты с кириллицей

Типографика *
Пусть расцветают сто цветов, пусть соперничают сто школ. Этим лозунгом первого китайского императора Цинь Ши Хуана хочется поднять волну народного негодования стремления к появлению как можно большего количества шрифтов с веб-лицензией, которые поддерживают кириллицу. Сто школ в данном случае — различные словолитни и сервисы, предоставляющие встраиваемые шрифты.

В настоящее время подобные сервисы активно развиваются. Крупнейший из них, Typekit, содержит на данный момент 376 шрифтов от более чем 30 производителей. Но вот незадача: Typekit пока поддерживает только подмножество Latin-1, хотя и работает над добавлением поддержки других подмножеств Unicode.

Что же прямо сейчас делать нам, пользователям кириллицы?

Читать дальше →
Всего голосов 29: ↑27 и ↓2 +25
Просмотры 6.8K
Комментарии 12

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

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

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

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

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

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

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

Кернинг сочетания «*.*» продолжает в этом шрифте оставаться ужасным, но в остальном развитие шрифта заслуживает громких и искренних апплодисментов.
Всего голосов 72: ↑52 и ↓20 +32
Просмотры 4.1K
Комментарии 16

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>
Читать дальше →
Всего голосов 151: ↑144 и ↓7 +137
Просмотры 11K
Комментарии 100

Прикручиваем клевые шрифты с помощью @font-face

Разработка веб-сайтов *
Перевод
Недавно столкнулся с задачей прикручивания достаточно необычного шрифта для мобильного веб клиента. Так как работа была под айфон, то я решил, что в этой задаче мне поможет css 3 и такая штука как @font-face. Пользу от такого способа решения задачи, я думаю, видят все, потому что:
  • сохраняется поиск по тексту, потому что это текст, а не картинка;
  • появляется возможность использовать онлайн-переводчики и разные фишки связанные с текстом;
  • никто не отменяет для нас использование line-height, letter-spacing, text-shadow,text-align, и селекторов вида ::first-letter и ::first-line

Читать дальше →
Всего голосов 98: ↑88 и ↓10 +78
Просмотры 43K
Комментарии 48

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

Разработка веб-сайтов *
Перевод
Перевод не претендует на 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 запустил бесплатный сервис шрифтов с растущей библиотекой. Все шрифты в библиотеке доступны и для частного хранения/использования.

Теперь пройдемся по пунктам…
Читать дальше →
Всего голосов 66: ↑63 и ↓3 +60
Просмотры 30K
Комментарии 43

Двадцатка лучших веб-шрифтов

Типографика *
Перевод
Top 20 Fonts

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов


Без преувеличения, сейчас сетевая типографика переживает захватывающий период своей жизни. Недавние технологические скачки приблизили нас еще на шаг ближе к типографической нирване в интернете. Шаг, которого все так долго ждали.

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.

Читать дальше →
Всего голосов 146: ↑128 и ↓18 +110
Просмотры 651K
Комментарии 71

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

Типографика *
Перевод
Tutorial
С самого начала «вебошрифтовой революции» мы полагались на неизящные хаки деклараций @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. Без шуток.

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


Читать дальше →
Всего голосов 141: ↑132 и ↓9 +123
Просмотры 70K
Комментарии 42

Drupal + Ajax + Свои шрифты + Flash + PNG = кроссбраузерный сайт

Drupal *
Из песочницы
Недавно, передо мной была поставлена задача разработать сайт на Drupal с использованием весомого Flash, фирменных шрифтов и PNG-графики так, чтобы всё это одинаково отображалось в офисных IE6 и других более популярных браузерах. Со всеми технологиями, я работал давно, но и предположить не мог, что всё вместе окажется одной большой головной болью. Но миллион разных частных решений таки привёл меня к общему решению этого длинного уравнения. О чем и собираюсь рассказать в сей статье.
Читать, как реализовано мной...
Всего голосов 34: ↑26 и ↓8 +18
Просмотры 3.1K
Комментарии 52

Typekit приобретён Adobe

Типографика *
3 октября 2011 года сервис Typekit, бизнес которого построен на платном предоставлении доступа к коммерческим шрифтам для оформления сайтов в Паутине при помощи директивы @font-face на языке CSS, был приобретён Adobe. В тот же день об этом можно было прочесть во блоге у Typekit и в пресс-релизе Adobe. По заявлению Adobe, сервис Typekit (в настоящее время насчитывающий около четверти миллиона пользователей, в их числе «Нью-Йорк Таймс» и Wordpress) со временем станет частью проекта Adobe Creative Cloud.

Следует заметить, что Adobe и без того можно было причислить к интернетовским шрифтоторговцам; просто в их коллекции Adobe Web Fonts число шрифтов перевалило за пару сотен, тогда как Typekit торгует тысячами. Полезно сопоставить это с количеством шрифтов в коллекции Adobe Type Library, которые продаются для внеинтернетовского употребления — число их превосходит 2300.

Читать дальше →
Всего голосов 34: ↑25 и ↓9 +16
Просмотры 7.6K
Комментарии 10

Загрузка векторных значков через @font-face: за и против

CSS *
С помощью @font-face вы можете загружать значки (иконки) не в виде PNG или GIF, а внедрить внутрь шрифта и подгрузить пользователю через директиву @font-face. CSS3 позволяет поворачивать такие значки, добавлять тени или даже анимированные эффекты с плавным изменением цвета при наведении курсора мыши (раньше такое было возможно только на Flash).

Вот здесь инструкция по использованию набора шрифтов 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>

Читать дальше →
Всего голосов 61: ↑54 и ↓7 +47
Просмотры 5.8K
Комментарии 33
1