Да, конечно же, на анализ ситуации это не тянет, как по количеству, так и по качеству. В этой заметке я немного пробегусь по двум шрифтовым хостингам (вообще-то, это название я придумал сегодня утром, но, я не удивлюсь, если так их называют и другие). Но перед этим я обрисую вопрос для тех, кто не в курсе происходящего. Заметка большая, потому что я не совсем определился с целевой аудиторией.
Для кого эта заметка?
Для тех, кто занимается «сайтостроительством», либо каким-никаким веб-дизайном в интернете. Например, как я, облагораживает свой блог, делая его неповторимым и приятным для глаз.
Как было раньше?
Раньше веб-дизайнеры были скованы в выборе шрифтов. Ведь, для того, чтобы какой-либо шрифт появился на странице, он должен был быть установленным в системе у того, кто просматривает эту страницу. Вспомним времена с тотальным засильем Windows и Internet Explorer (прости, господи:). «Из коробки» у всех идут одни и те же шрифты. Скучно. И ширпотреб, отнюдь, не может быть образцом шедевра.
Те, кто установил себе MS Office, дополнительно получают в своё распоряжение целый ворох шрифтов для своих «нетленок». Эти шрифты также можно использовать как и для того, чтобы подписывать значки на рабочем столе, так и для веб-страниц. Но то, что Windows и MS Office стоит почти у каждого, типично, скорее для нашего, пост-советского пространства. И, к тому же, каждая новая версия того же Windows и, отдельно, MS Office добавляет всё новые шрифты в систему.
На что можно ориентироваться? На общий для всех минимум? Times New Roman, Arial или Verdana, или даже Tahoma? С другой стороны, это — если у вас Windows. А если Linux? Ой, не учите меня жить! — скажет веб-дизайнер, — эта горстка красноглазиков сама виновата, что мои шедевры у них будут отображаться криво :) Ладно. А как насчёт гламурной «яблочной империи» (Apple)? Имеется ли у них, скажем, Verdana в стандартной поставке?
Для того, чтобы можно было хоть как-то управлять этой ситуацией, были выработаны следующие правила.
Во-первых, для веб-страниц были выделены категории шрифтов:
- serif (с засечками, книги, учебники);
- sans-serif (без засечек, газеты, почти все сайты);
- monospace (моноширинный, телетайп, печатная машинка);
- fantasy (что за зверь? по идее, что-то с завитушками).
Теперь веб-дизайнер делает, скажем, заголовки шрифтом fantasy, основной текст страницы sans-serif, цитаты шрифтом monospace… А браузер, по своим (или пользовательским) настройкам подставляет вместо них реальные шрифты, установленные в системе.
Во-вторых, правила определения шрифтов позволяют назначать сразу несколько разных гарнитур через запятую, например:
Tahoma, Verdana, Arial, sans-serif
Это значит, что предпочтительный шрифт Tahoma, но, если его нету, то сойдёт и Verdana. А если нету его, то Arial. Но, если вы такой нищий, то подойдёт любой из категории sans-serif.
Но, хотя эти шрифты все без засечек и похожи друг на друга, всё же они имеют разные метрики. Это значит, что, например, если напечатать этими разными шрифтами, но одинаковым размером (например, 12 pt) какое-либо слово, или несколько строк, то окажется, что при одинаковой высоте букв различается их ширина, или расстояние между строками. Или же расстояние одинаковое, а сами буквы мельче.
Это не мелочи, не ерунда! Для дизайнера это может обернуться серьёзным расстройством :) Например, когда надпись не поместилась на кнопку и перенеслась на вторую строку, потянув за собой весь, бывший до этого красивым, дизайн. Я, конечно, немного лукавлю :) Настоящий дизайнер пресекает такую ситуацию на корню. Многолетний опыт веб-дизайна, как-никак. Но, в общем-то, я им не завидую :)
Как есть теперь?
Относительно недавно веб-браузеры научились загружать шрифты из интернета. Теперь шрифт — это такой же элемент страницы, как и стили, картинки, скрипты и flash.
Создали разновидность шрифтов — веб-шрифты. В чём их отличие от традиционных? Отличия проистекают из их предназначения. Они должны загружаться быстро, отображаться на экранах (с довольно низким разрешением), работать в браузерах. Эти шрифты упрощаются — иногда из них выбрасываются ненужные символы; упрощаются контуры символов, так шрифт высотой 12, или даже 30 точек выглядит неплохо на экране (96-133 точек на дюйм), а, вот высотой 100-200 точек на лазерном принтере (300 точек на дюйм) может выглядеть как-то не очень. Сейчас веб-шрифты это файлы размером 30-200 КБ, что при умеренном применении практически не влияет на скорость отрисовки сайта. То, что шрифты предназначены для браузеров, привело к разработке новых форматов файлов шрифтов. Так, наряду с привычными TTF (OTF) применяются WOFF и EOT. Наверное, хотят, чтобы кто-то не украл понравившийся шрифт со страницы и не использовал его в своих целях в своей системе.
Почему шрифты — это важно?
С каждым годом шрифтов становится всё больше. Их количество плавно приближается к количеству звёзд на небе. И так же потухают старые и загораются на небосводе новые звёзды. А если звёзды зажигают — значит это кому-то нужно :)
Шрифты выполняют двоякую роль. Кроме того, что они, собственно, доносят до нас содержимое текста, они несут еще и какое-то настроение. Например, весёлые заголовки с «прыгающими» буквами, или в стиле «как курица лапой». Напротив, основной шрифт страницы должен быть легко читаемым, приятным для глаз, не создающим нагрузку при чтении большого объёма текста. Хороший шрифт человек просто не замечает! Он просто читает, и всё! Задача дизайнера шрифтов состоит в том, чтобы символы были легко узнаваемыми. Но, даже при этом, лёгкое изменение в начертании отдельных символов может придать шрифту свою изысканность, можно сказать, элитность. Когда-то читал, что сайт Apple на их же компьютерах выглядит значительно красивее, чем сайт Microsoft на их же операционке. Всё дело в шрифтах. Кстати, в шрифтах, используемых системой по умолчанию.
Когда рассматриваешь большую коллекцию шрифтов, видишь, что все их можно распределить по нескольким группам, хватит пальцев на руках. В пределах этих групп шрифты похожи почти как близнецы. Но, при ближайшем рассмотрении можно увидеть, например, что в букве «е» не горизонтальная, а наклонная перекладина, а у буквы «g» не выглядывает хвостик сверху :) Своим стилем, ритмом, шрифт может вызывать определённые эмоции, например, некоторые шрифты кажутся весёлыми, другие — строгими, иные — слишком строгими, даже занудными, редкие из них могут вызвать ностальгию по приключенческим книгам, которые читал в детстве, когда климат был умереннее, трава была зеленее, а деревья выше :)
Постепенно начертание шрифтов приедается и на их место приходят другие. Честное слово, их как звёзд на небе! Как маленьких ярких точек на чёрной поверхности, почти ничем не отличающихся друг от друга…
Теперь, собственно о хостингах
Вот теперь, собственно, можно переходить к шрифтовым хостингам. Это централизованные серверы в интернете, на которых лежат шрифты, которые и будут загружать браузеры. Веб-дизайнер выбирает шрифты и посредством специальных стилей привязывает их к страницам своих проектов. Шрифтовой хостинг — это тоже бизнес. Во-первых, разработка качественных шрифтов — это довольно трудоёмкий процесс. Во-вторых, за использование и обслуживание серверов тоже нужно платить.
Я вкратце рассмотрю только два представителя:
- webfonts.fonts.com от Monotype
- www.google.com/webfonts от Google
Для использования шрифтов в своих проектах от fonts.com сначала нужно зарегистрироваться. При этом предлагаются три варианта: бесплатный, стандартный и профессиональный планы. Всего на хостинге представлено чуть более 12 тыс. шрифтов профессионального качества. Некоторые из них доступны в бесплатном плане. Скачать шрифты себе в бесплатном плане невозможно. Все шрифты посредством стилей привязываются к вашему сайту, и поэтому нельзя «на халяву» скопировать оформление с другого сайта и поставить на свой. Шрифт будет просто «не найден», либо «доступ запрещён». После выбора понравившихся шрифтов из доступных и определения необходимых стилей в бесплатном плане выдаётся маленький кусочек кода, который нужно вставить на свою страницу в head. Вот такой:
<script type="text/javascript" src="http://fast.fonts.com/jsapi/4be9244b-0241-5a9f-a0c2-545669d88956.js"> </script>
В стандартном плане можно использовать обычные стили без скриптов, а в профессиональном можно располагать шрифты на своём сервере вместе со всеми своими страничками, скриптами и картинками. Но и стоят эти возможности очень не маленькую копеечку. Сколько, при желании вы узнаете это сами.
При всём при том, что разграничение прав доступа к определённым шрифтам представляет собой незыблемый, неподкупный механизм, всё равно остаются уязвимости в доступе в самом браузере и вы «на халяву» можете получить себе все 12 тысяч шрифтов. Как говорится, то, что попало в браузер, то уже доступно и пользователю.
Здесь у меня совершенно нет никакого желания рассказывать вам как нарушать закон. Мне достаточно намекнуть, что есть такая вещь как кеш веб-браузера. Или, страничку можно просто целиком сохранить, а потом посмотреть, из каких файлов она состоит. Как обуздать утекающие у компании деньги? Только через изменение браузеров, шифрование кеша и прочие меры.
Вторым я рассматриваю детище корпорации Google. Здесь представлено почти 200 шрифтов. Поддержкой кириллицы может похвастаться вообще десяток. Но при этом, любой из шрифтов в любой комбинации, хоть даже все вместе можно легко загрузить себе на компьютер или свой сервер. И это не воровство.
Сайт предлагает хорошие возможности для подбора шрифта. Все шрифты могут быть представлены в виде одного-нескольких слов, когда вы выбираете заголовки, либо в виде абзаца текста, либо просто название шрифта выполненное самим же шрифтом.
Также здесь присутствует некий спидометр, который показывает на сколько относительно медленнее будет загружаться ваша страница, т.к. шрифты изначально различаются по размеру файлов, и, кроме того, можно выбрать только необходимые страницы шрифта (латиница, расширенная латиница, кириллица, расширенная кириллица).
Ещё здесь имеется площадка для тест-драйва. Некая «сферическая» страница с заголовком и основным текстом позволяет на лету менять стили отдельных элементов страницы и сразу же оценивать на глаз изменения.
Для подключения шрифта предлагается 3 варианта. Самый простой — прописать, например, такую строку в head:
<link href="http://fonts.googleapis.com/css?family=Forum&subset=cyrillic,latin&v2" rel=stylesheet type="text/css"> </link>
После этого выбранный шрифт (Forum) будет доступен странице и его можно будет использовать при определении стилей, например, так:
h1 { font-family: Forum, "Times New Roman", serif; font-weight: 400; }
Окончание
Чтобы подвести какой-то итог этой заметки, скажу, что тема веб-дизайна неисчерпаема. А веб-браузеры приобретают с каждым годом всё новые и новые возможности. Ещё когда-то странички просматривали в консоли, а теперь прямо на сайтах можно играть в трёхмерные игры или управлять своей «облачной» операционкой.
0 коммент.:
Отправить комментарий