Шрифт - важнейший элемент в дизайне Web-сайта, который может усилить или наоборот уменьшить эффективность взаимодействия с пользователями. Выбор шрифта часто игнорируется, и напрасно, поскольку правильно оформленный текст способен не только облегчить восприятие информации, но и стимулировать посетителей к выполнению определенных действий (переход по ссылке, нажатие на кнопку «купить» и т.д.), также не стоит забывать и об эстетическом восприятии веб-сайта как целостной композиции.
Компьютерный шрифт. Для формирования изображений букв текста на дисплее, принтере и других устройствах используются компьютерные шрифты. Компьютерный шрифт - это программа (написанная на специальном языке разметки шрифта), которая может быть использована во всех приложениях Windows / Mac OS.
Гарнитура шрифта - это комплект шрифтов, имеющих общие стилевые признаки (схожий рисунок), но отличающихся начертанием (жирный, обычный, курсив и т.д.). Например «Arial», «Arial Italic», «Arial Bold» - это шрифты гарнитуры «Arial».
Типы шрифтов.
По способу представления (отрисовки) букв (символов) шрифты делятся на три типа:
растровые
- каждая буква представляет собой изображение из точек (пикселей), готовых для печати на принтере или отображения на экране;
векторные - каждая буква представлена набором команд для исполнительного механизма (пера, печатающей головки и т.д.) соответствующего устройства;
контурные – математическое описание формы контуров символов. Контурные компьютерные шрифты являются наиболее современными и универсальными, поэтому имеют самое широкое распространение.
В зависимости от ширины символов, шрифты бывают:
моноширинные
– все символы одинаковой ширины. Устаревший шрифт.
пропорциональные – символы могут быть разной ширины. Например, буква «W» занимает гораздо больше места, чем буква «I». Такой текст более аккуратен, лучше читается. Пропорциональный шрифт является основным для отображения текстов, то есть используется всегда (за редким исключением).
Учитывая все многообразие различных шрифтов, их довольно сложно (если вообще возможно) строго или точно классифицировать. Так, гарнитуры можно разделить по форме символов: с засечками и без засечек. Засечки – это элементы окончания букв: прямоугольные, изогнутые, круглые и т.п. Есть мнение, что шрифты с засечками облегчают чтение (буквы хорошо разделены и не сливаются), однако здесь, скорее всего все дело в привычности к таким шрифтам, ведь они применяются в печатных изданиях (газеты, книги, журналы). В операционных же системах большей популярностью пользуются шрифты без засечек, потому как на мониторах с низким разрешением засечки могут некорректно (плохо) отображаться.
В зависимости от применения шрифты условно можно разделить на наборные, большие, декоративные и символьные:
наборные
применяются для основного текста, так как более доступны для чтения даже при малом размере символов;
большие шрифты имеют более толстые штрихи и хорошо смотрятся, если размер буквы достаточно велик. Целесообразно применять для заголовков;
декоративные – произвольный рисунок символов. Рассматриваются скорее как элемент дизайна;
символьные – вместо букв содержат различные рисунки, символы и т.д. Применяются при создании графических объектов, чертежей, формул и т.п.
Выбор шрифта для сайта.
При выборе шрифтов для web-ресурса необходимо учитывать следующие нюансы:
Одни шрифты оптимизированы для вывода на экран монитора, другие - на печать. Следовательно, шрифты, созданные для вывода на печать (в частности шрифты с засечками) на экране могут выглядеть неаккуратно.
Отображение текста зависит от типа браузера и его настроек, которые пользователь может изменять.
Размер шрифта зависит от настроек операционной системы пользователя и разрешения экрана.
Не все операционные системы содержат одинаковые системные шрифты.
Безопасные шрифты. Опытному разработчику известно, что для отображения страницы браузер использует только те шрифты, которые установлены на компьютере пользователя. В этом плане шрифты делятся на две категории:
1. Стандартные шрифты , содержащиеся в установочных пакетах операционных систем, офисных и Интернет приложениях.
2. Произвольные шрифты , которые пользователь устанавливает в зависимости от собственных потребностей и предпочтений. Важно! Могут отсутствовать у значительной группы пользователей!
Поскольку набор стандартных шрифтов в разных операционных системах может отличаться, «безопасным» называют такой шрифт, который присутствует в каждой из них, то есть является общим для всех операционных систем. Нужно заметить, что не бывает абсолютно безопасных шрифтов: всегда есть некоторые оговорки.
Точкой отсчета для определения «безопасности» шрифта служит, конечно же, операционная система Windows, так как является наиболее распространенной. Основываясь на шрифтах Windows (которые присутствуют и в других операционных системах) можно представить следующий список «безопасных» web-шрифтов:
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Все эти шрифты можно смело использовать при создании web-сайта: вероятность их поддержки любой из операционных систем близка к 100%.
Существует огромное количество способов для того, чтобы найти подходящий шрифт для вашего сайта. Например, можно воспользоваться сервисами с огромными библиотеками шрифтов, которые предполагают платную подписку.
Если же ваш бюджет ограничен или вы экспериментируете с небольшим проектом, вы можете воспользоваться бесплатными веб-шрифтами, находящимися в свободном доступе. Поиск подходящего веб-шрифта для сайта может занимать огромное количество времени, поэтому мы предлагаем вам подборку лучших среди них.
1. Montserrat
По мере своего развития, типографика уходит от старинных урбанистических постеров и знаков. Создатель этого шрифта попыталась сохранить красотку типографики городских постеров, увиденных ею на улицах в Буэнос-Айресе.
2. Abril Fatface
Abril Fatface является частью большого семейства шрифтов, которая представлена 18 стилями, созданными для различных целей. Этот шрифт отличается сильным, элегантным присутствием, что делает его прекрасным решением для создания бросающихся в глаза заголовков. Чаще всего его комбинируют с Lato, Open Sans и Droid Sans.
3. Playfair Display
Учитывая значительную x-высоту и небольшие подстрочные элементы литер, Playfair Display также подходит для написания заголовка, особенно если место для него ограничено. Он хорошо сочетается с Georgia и часто используется с Oswald, Lato и Arvo.
4. GT Walsheim
Используемый сегодня во многих блогах, GT Walsheim является представителем геометрических гротесков и входит в семейство Grilli Type. За полный набор шрифтов нужно платить, но Grilli Type предлагает бесплатную пробную версию GT Walsheim.
5. Merriweather
Если читабельность на экране является приоритетом вашего проекта, воспользуйтесь Merriweather, который был создан для этой цели. К тому же, этот шрифт постоянно дорабатывается.
6. Josefin Sans
Josefin Sans создавался согласно канонам винтажного шведского дизайна и отличается элегантной геометрической эстетикой.
7. Gravitas One
Gravitas One создан на основе “UK fat face” – жирного рекламного шрифта, появившегося во время индустриальной революции в Англии. Этот шрифт прекрасно выглядит в среднем и большом масштабе и подходит для заголовков, названий и вкладок.
8. Jura
Литеры этого шрифта повторяют формы письма Кая-ли. В нем также содержатся глифы кириллицы и греческого алфавита. Он доступен в светлом, нормальном, среднем и полужирном начертаниях.
9. League Gothic
Изначально спроектированный Морисом Бентоном (Morris Fuller Benton) для American Type Founders Company в 1903 году, League Gothic нашел себе новое применение после апдейта и добавления новых глифов.
10. Fjord
Fjord – это шрифт с засечками, изначально созданный для печатных книг и особенно подходящий для размещения длинных текстов в небольшом печатном формате. Его можно применять для создания большого объема текстового контента на сайте, так как шрифт отличается четкой структурой, заметными засечками и длинными элегантными верхними и нижними выносными элементами.
11. Amaranth
Семейство шрифтов Amaranth отличается ненаклонным курсивным дизайном с небольшим контрастом и заметными изгибами. Все три стиля Amaranth хорошо сочетаются с практически любым другим шрифтом. С этим шрифтом можно поиграть – экспериментируйте и выбирайте лучшее.
12. Poly
Этот среднеконтрастный шрифт был изначально создан для туземного языка Wayuunaiki, для которого необходимы широкие глифы. Он отличается маленькими выносными элементами и большой x-высотой, что делает его особенно полезным в небольших размерах.
13. Gentium Basic
Этот шрифт создавался как мульти-лингвистический, включающий в себя латинские и греческие литеры, а также кириллицу и продвинутую поддержку в версии Gentium Plus. Gentium Basic и Gentium Book Basic доступны в бесплатной веб-версии, но ограничены только латинским алфавитом.
14. Open Sans
Open Sans является представителем гуманистических гротесков. Этот шрифт отличается высокой степенью разборчивости и адаптирован как для веб-, так и для мобильных интерфейсов. Это ненаклонный шрифт с простым начертанием литер, для которого характерен нейтральный, но достаточно приятный вид, что позволяет использовать его в разных целях.
15. Ledger Regular
Это мультифункциональный шрифт с большой x-высотой, сильным цветовым контрастом, четко очерченными засечками, что вносит свой вклад в читабельность текста. Этот шрифт хорошо выглядит как в печатном виде, так и на экране с низким разрешением.
16. Signika
Этот бесплатный веб-шрифт является представителем гротесков. Низкая контрастность и большая x-высота позволяют Signika хорошо отображаться на экране. Широкий выбор значков включает в себя символы, пиктограммы и стрелочки.
17. Josefin Slab
Созданный согласно канонам геометрического шрифта, характерного для 30-х годов прошлого века, с добавлением скандинавских черт, шрифт Josefin Slab обладает характеристиками брускового шрифта и напоминает шрифт печатной машинки. Интересно, что его х-высота составляет половину от высоты прописной буквы.
18. Forum
Как и предполагает название, это шрифт Roman, который хорош для заголовков в caps lock, но также подходит и для отображения текстов. Элегантные пропорции этого шрифта напоминают классическую архитектуру с ее полукруглыми арками, горизонтальными карнизами и вертикальными колоннами.
Названный в честь одного из самых известных городов Майя, Tikal Sans обладает чертами глифов, которые использовались в письме южноамериканской цивилизации. Его создатель выбрал большую x-высоту, что придало шрифту современный вид и оказало благотворное влияние на его разборчивость, а большой выбор видов начертаний позволяет применять его для различных целей.
20. Arvo
Подходящий в равной степени как для печатной, так и для веб-версии, этот геометрический брусковый шрифт доступен в Roman, Italic, Roman Bold и Bold Italic. Небольшая контрастность Arvo повышает его читабельность на экране.
21. Bevan
Bevan был создан на основе традиционного брускового шрифта 30-х. Буквы были отцифрованы, им придали новую форму и оптимизировали для веб-версии. Это один из немногих сверхжирных шрифтов, которые подходят для сайтов.
22. Old Standard TT
Old Standard TT был создан на основе шрифта с засечками Modern, который был популярен в конце 19-начале 20 веков, а затем забыт на долгое время. Этот шрифт подходит для придания стиля особому виду контента, например, научным исследованиям или текстам на греческом или кириллице.
23. Kreon
Идеально подходящий для новостных веб-сайтов и блогов, этот шрифт с засечками обладает также чертами брускового шрифта, но его сбалансированность и низкоконтрастность делают Kreon значительно более персонализированным.
24. Droid Sans
Droid Sans был оптимизирован для максимальной читабельности даже в небольших интерфейсах – например, меню на экранах мобильных телефонов. Это нейтральный ненаклонный шрифт с простыми открытыми очертаниями литер.
25. Italiana
Создатель этого шрифта вдохновился классической итальянской каллиграфией, поэтому шрифт будет очень полезен для проектов, где необходимо добавить элегантности. Italiana также подходит для написания новостных заголовков как в печатном, так и электронном виде.
26. Vollkorn
Этот детально разработанный, многофункциональный шрифт с засечками очень популярен. Его четкость и основательность выражают уверенность и энергию, что делает шрифт одинаково эффективным как в больших размерах для заголовков и названий, так и для значительных объемов текста в более мелком формате.
27. Actor
Этот шрифт отличается особенно большой x-высотой, что требует достаточно много пространства. Для Actor также характерно старомодное начертание некоторых символов, например, цифр 6 и 9.
Уходящий корнями в 16 век, гуманистический шрифт Garamond стал настоящей иконой типографики, неоднократно послужившей основой для создания современных шрифтов, включая шрифт EB Garamond.
31. Ubuntu
Гротеск Ubuntu был создан для того, чтобы персонализировать веб-текст как на десктопах, так и мобильных устройствах. Пользователям предлагается экспериментировать с этим шрифтом, модифицировать и улучшать его по своему усмотрению.
32. Rosario
Rosario является классическим гуманистическим гротеском, который прекрасно подойдет для стилизации абзацев текста.
33. Roboto Slab
Roboto Slab является одним из шрифтов семейства Roboto. Брусковая версия особенно привлекает взгляд своими геометрическими формами и открытыми изгибами. Он одинаково хорошо подходит для экранов гаджетов и печатных версий текстов.
34. Oswald
Шрифт является переработанной версией классического гротеска Alternate Gothic. Oswald был недавно обновлен, теперь он представлен в различных начертаниях, содержит расширенный набор символов и отличается более удобным кернингом.
35. Stalemate
Stalemate – это изящный рукописный шрифт с некоторым винтажным оттенком. Он подходит для создания акцентов и персонализации вашего сайта.
36. Crimson Text
Этот тщательно разработанный классический пропорциональный шрифт может использоваться как для отображения больших объемов текста, так и написания заголовков.
Очень много было написано о дизайне шрифтов, особенно об истории их создания. Мы читали о множестве техник создания шрифтов. Но откуда, собственно, нужно начинать? Если вы – дизайнер или иллюстратор, и эта дисциплина вам в новинку, то с чего же вам начинать?
Мы нашли полезную информацию, которую собрали с множества источников, и решили собрать все воедино.
1. Начните с брифа
Создание шрифта – это долгая и кропотливая работа, поэтому очень важно иметь четкое понимание того, каким должен быть этот шрифт.
Разработка брифа безусловно потребует исследований и раздумий. Как будет использоваться ваш шрифт: он понадобится для специфического проекта или для личного пользования? Есть ли проблема, которую ваш шрифт решил бы? Впишется ли ваш шрифт в массив похожих дизайнов? Что делает его уникальным?
Вариантов много. Шрифты могут быть созданы, к примеру, специально для академических текстов или для плакатов. Только когда вы будете знать, как ваш шрифт может быть использован, тогда вы будете готовы начинать дизайн.
2. Фундаментальный выбор
Существует некоторое количество решений, о которых нужно помнить. Будет ли это рубленный шрифт или с засечками? Будет ли он основываться на рукописном тексте или будет более геометричным? Будет ли шрифт создан для текста и подходить для длинных документов? Или может он будет отображать текст в креативном стиле и будет лучше смотреться в крупном размере?
Подсказка: Предполагается, что дизайн рубленного шрифта дается начинающим сложнее, так как возможности таких шрифтов более специфичны.
3. Подводные камни на ранних этапах
Есть несколько подводных камней:
- Вы можете решить начинать с компьютеризации рукописного шрифта, что может быть полезным практическим упражнением. Но из-за того, что почерк очень индивидуален, ваш шрифт может не иметь большого успеха из-за своей специфичности.
- Не стоит брать за основу существующие шрифты. Переделав немного уже знакомый всем шрифт, вы не создадите шрифт получше и не разовьете свои навыки.
4. Используйте свои руки
Существует много материалов на тему того, как рисовать шрифты с помощью компьютерных программ, но мы настойчиво рекомендуем вам сначала нарисовать его от руки. Попытки сделать это на компьютере существенно усложнят вашу работу.
Попробуйте создать красивые формы первых нескольких букв на бумаге, а уже потом начинайте компьютерную работу. Следующие буквы потом могут быть сконструированы на основе существующих форм, в соответствии с ключевыми особенностями.
Подсказка: Вручную обычно получается нарисовать более гладкие и точные кривые. Чтобы было удобнее, не бойтесь поворачивать лист бумаги так, как вам нужно.
5. С каких символов начать
Создание сначала определенных символов может помочь вам задать стиль своего шрифта. Ну а потом эти символы будут использоваться как направляющие. Обычно “контрольные символы”, как их называют, в латинице – это n и o, а заглавные – H и O. Зачастую используется слово adhension, которое поможет протестировать базовые пропорции шрифта (но, некоторые пишут это слово как adhencion, потому что буква s может быть очень коварной).
6. Переносим шрифт на компьютер
Существует множество способов перенести рисунок на компьютер. Некоторые рекомендуют трассировочные программы, но многие предпочитают совершать эту работу вручную, чтобы иметь полный контроль над точками и формами.
Многие программы нуждаются в четком и ярком рисунке, поэтому как только вам понравился ваш шрифт, обведите его тонкой ручкой и заполните формы маркером.
Подсказка: Если вы обработали нарисованный шрифт так, как было описано выше, то вы можете просто сделать фото рисунка и работать с ним.
7. Выбор программы
Многим дизайнерам нравится использовать Adobe Illustrator. Для рисования отдельных форм и экспериментирования он отлично подходит. Но в последствии становится очевидным, что для создания шрифтов он не подходит. Вам захочется работать с программой, которая позволит работать с межбуквенным интервалом и созданием слов.
Отличная программа – FontLab Studio, но новый софт, такой как Glyphs и Robofont набирают все большую популярность. Эти программы недешевые, но у Glyghs есть “мини” версия в Mac App Store с некоторыми отсутствующими функциями, что не очень хорошо, потому что эти функции важны новичкам.
8. Использование программ
Не забывайте расположить крайние точки буквенных форм (верхняя, нижняя, правая, левая), чтобы лучше контролировать процесс.
9. Слова
Когда вы закончили все работы по приглаживанию форм, посмотрите, как он смотрится в полноценном тексте. Возьмите себе за цель проанализировать то, как шрифт смотрится в строке, абзаце и так далее. И не стоит ждать, пока вы сделаете весь алфавит.
Одна из самых популярных программ для дизайна шрифтов. Доступна на Windows и Мас.
Программа доступна на Windows, имеет интуитивный интерфейс и отлично подходит новичкам.
Еще один мощный редактор шрифта от FontLab, позволяющий создавать новые шрифты или изменять существующие. Доступен на Windows и Мас.
Эта программа работает на Windows, Mac, Unix/Linux и переведена на множество языков. Также позволяет создавать новые шрифты и редактировать имеющиеся.
OpenType редактор шрифтов, доступен на Windows и Mac OS X. Довольно простой и содержит достаточное количество функций.
Еще один бесплатный инструмент, с помощью которого вы сможете создавать точечные шрифты.
Условно бесплатный (9 долларов за скачивание шрифта) онлайн-инструмент, который позволяет создавать шрифты на основе рукописного текста.
Еще один онлайн-инструмент (также почти 10 долларов за скачивание), который позволяет создавать шрифт из текста, написанного от руки.
Бесплатный и довольно сильный редактор шрифтов. Отлично подходит начинающим и тем, кто не хочет тратить деньги на покупку программ.
Это приложение доступно на iPad и Windows 8. Позволяет создавать шрифт из наброска и редактировать существующие шрифты.
Бесплатный ограниченное количество времени инструмент. С его помощью вы можете создавать шрифты и скачивать их.
Бесплатный онлайн-инструмент, позволяющий создавать TTF и OTF шрифты на основе рукописного текста.
Есть бесплатная и премиум-версия. Программа работает на Windows, Linux, Mac OS X и BSD.
.Узнал об этой теме массу нового для себя. В частности, два способа подключения шрифтов, особенность работы с сервисом Google Fonts и числовая шкала плотности шрифтов, ресурсы для поиска бесплатных шрифтов, тонкости работы с генератором FontSquirrel, ресурсы по шрифтовым иконкам. Для меня информация оказалась чрезвычайно полезной и интересной.
Ниже привожу краткий конспект всех вопросов, показавшихся мне интересными и новыми в моей практике, пересказанный своими собственными словами. Надеюсь, данный материал окажется полезным не только для меня одного.
Подключение веб-шрифтов с помощью @font-face:
- подключение нестандартного шрифта с помощью директивы
Директива
указывает браузеру применить шрифт с указанным именем выбранным элементам страницы.Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,
Формат EOT , который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.
Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически - это облегченная версия формата TTF или OTF.
Форматы OTF (Open Type Font) и TTF (True Type Font) - это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.
Формат SVG - это даже не формат шрифта, а формат графики, графического изображения. Особенностью этого формата является то, что графика в этом формате создается исключительно с помощью векторов, то есть - математических формул.
Благодаря этому изображения в таком формате масштабируются без потери качества - при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт - это фактически картинка в масштабируемом формате SVG.
Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов - “не умеешь кушать обычную пищу, так кушай хотя бы это!”.
Правовой вопрос использования шрифтов
Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные .
Платные шрифты делятся на те, которые:
- можно использовать в Веб
- нельзя использовать в Веб
Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit , на которых собраны все шрифты, которые можно использовать в Веб . Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).
Краткий список источников бесплатных шрифтов , которые можно использовать в Веб:
- https://www.theleagueofmoveabletype.com/)
- FontSquirrel (http://www.fontsquirrel.com/)
- Google Fonts (https://www.google.com/fonts)
- The Open Font Library (http://openfontlibrary.org/ru)
- Fontex.org (http://fontex.org/)
- Exljbris Font Foundry (http://www.exljbris.com/)
Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator , находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).
Единственное ограничение этого сервиса - он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.
Генератор
важен и должен быть следующим: @font-face { font-family : "PTSans" ; src : url("PTSansRegular.eot") ; src : format ("embedded-opentype" ), url("PTSansRegular.woff") format ("woff" ), url("PTSansRegular.ttf") format ("truetype" ), url("PTSansRegular.svg") format ("svg" ); }- EOT - формат только для Internet Explorer 8 и ниже
- WOFF - самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
- TTF - сравнительно большой по размеру шрифт и достаточно устаревший
- SVG - самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone )
Браузер читает тело директивы
является неслучайной и эмпирически выверенной на основе опыта предыдущих веб-разработчиков. h1 { font-family : "League Gothic" , Arial , sans-serif ; font-weight : normal ; }Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем - резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).
Внимательный читатель обратит внимание на вторую строку и скажет: это здесь лишнее, бред какой-то. На самом деле не совсем так. Браузеры всегда пытаются отрисовать заголовки полужирным начертанием, по умолчанию. Поэтому, здесь мы говорим, чтобы браузер просто этого не делал, и все.
Помимо букв, шрифты могут состоять из иконок или изображений. Ресурсы, посвященные теме шрифтовых иконок и значков:
Виды шрифтов
При подключении шрифтов, установленных на компьютере, обычно не возникает вопросов и мы не задумываемся о том, как так получается, что при указании браузеру отрисовать текст полужирным с помощью тега
текст действительно делается курсивным; а при полужирном курсиве через теги1 | strong em |
На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).
Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь - попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название
значительно осложняется и может быть выполнено двумя способами: простым , который IE8 не понимает (но понимают все остальные браузеры) и сложным , который будет доступен и IE8 также.Простой способ подключения веб-шрифта
Простой способ заключает в добавлении к директиве
и эти правила выполняют другую роль, они заставляют браузер загрузить веб-шрифт с указанным стилем и жирностью. Чтобы быть более понятным, приведем сразу пример подключения веб-шрифта PTSans с четырьмя вариантами его отображения: @font-face { font-family : "PTSans" ; src : url("PTSansRegular.eot") ; src : url("PTSansRegular.eot#iefix") format ("embedded-opentype" ), url("PTSansRegular.woff") format ("woff" ), url("PTSansRegular.ttf") format ("truetype" ), url("PTSansRegular.svg") format ("svg" ); font-weight : normal ; font-style : normal ; } @font-face { font-family : "PTSans" ; src : url("PTSansItalic.eot") ; src : url("PTSansItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansItalic.woff") format ("woff" ), url("PTSansItalic.ttf") format ("truetype" ), url("PTSansItalic.svg") format ("svg" ); font-weight : normal ; font-style : italic ; } @font-face { font-family : "PTSans" ; src : url("PTSansBold.eot") ; src : url("PTSansBold.eot#iefix") format ("embedded-opentype" ), url("PTSansBold.woff") format ("woff" ), url("PTSansBold.ttf") format ("truetype" ), url("PTSansBold.svg") format ("svg" ); font-weight : bold ; font-style : normal ; } @font-face { font-family : "PTSans" ; src : url("PTSansBoldItalic.eot") ; src : format ("embedded-opentype" ), url("PTSansBoldItalic.woof") format ("woff" ), url("PTSansBoldItalic.ttf") format ("truetype" ), url("PTSansBoldItalic.svg") format ("svg" ); font-weight : bold ; font-style : italic ; }Расскажу, как я понимаю данные CSS-правила. Директива
. Эта переменная является массивом, который заполняется значениями с помощью последующих правил:- - загрузить шрифт указанной жирности;
- производилось каждый раз отдельным вызовом функции к выбранным элементам страницы:
p
{
font-family
:
PTSans
;
}
И затем HTML-тегами
указать, какое начертание шрифта применить к указанным элементам: dolor ets < strong > lorem ipsum dolor ets strong > lorem ipsum ipsum dolor ets lorem ipsum < em > dolor ets lorem ipsum dolor em > ets lorem ipsum dolor etsБраузер “вытащит” из массива PTSans шрифт нужного начертания (bold или italic или bold italic) и применит его к указанным элементам страницы.
Преимуществом данного способа подключения веб-шрифта является его универсальность. Достаточно один раз объявить шрифт с помощью директивы
и .В тех местах, где применены теги
, браузер IE8 будет сам делать из шрифта PTSans начертания . Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже: @font-face { font-family : "PTSansRegular" ; src : url("PTSansRegular.eot") ; src : url("PTSansRegular.eot#iefix") format ("embedded-opentype" ), url("PTSansRegular.woff") format ("woff" ), url("PTSansRegular.ttf") format ("truetype" ), url("PTSansRegular.svg") format ("svg" ); } @font-face { font-family : "PTSansItalic" ; src : url("PTSansItalic.eot") ; src : url("PTSansItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansItalic.woff") format ("woff" ), url("PTSansItalic.ttf") format ("truetype" ), url("PTSansItalic.svg") format ("svg" ); } @font-face { font-family : "PTSansBold" ; src : url("PTSansBold.eot") ; src : url("PTSansBold.eot#iefix") format ("embedded-opentype" ), url("PTSansBold.woff") format ("woff" ), url("PTSansBold.ttf") format ("truetype" ), url("PTSansBold.svg") format ("svg" ); } @font-face { font-family : "PTSansBoldItalic" ; src : url("PTSansBoldItalic.eot") ; src : url("PTSansBoldItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansBoldItalic.woof") format ("woff" ), url("PTSansBoldItalic.ttf") format ("truetype" ), url("PTSansBoldItalic.svg") format ("svg" ); }Обратите внимание на отсутствие правил
и , ? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код? p { font-family : PTSansRegular ; font-weight : normal ; font-italic : normal ; font-size : 36px ; } p strong { font-family : PTSansBold ; font-weight : bold ; font-italic : normal ; } p em { font-family : PTSansItalic ; font-weight : normal ; font-italic : italic ; } p strong em { font-family : PTSansBoldItalic ; font-weight : bold ; font-italic : italic ; }Применять или не применять второй способ подключения веб-шрифтов - это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.
Шрифты Google Fonts
Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив
, второй в помощью директивы более лаконичный - достаточно подключить ее в начало таблиц стилей, чтобы выбранные шрифты применялись ко всем HTML-страницам.Третий способ с помощью JavaScript кроме сложности, никаких других преимуществ перед двумя другими не имеет.
В Google плотность шрифта обозначается не с помощью ключевых слов
, а в числовой шкале - 100 до 900. Значение 400 соответствует шрифт Gentium Book Basic нормальной плотности курсивного начертания: em { font-family : "Gentium Book Basic" , serif ; font-weight : 400 ; font-style : italic ; }На этом выжимка по веб-шрифтам заканчивается.
Давненько ничего не писал, ну да ладно.
В данный момент занимаюсь web разработкой и встал вопрос о красивом меню. С анимацией, но без JS или Flash. Конечно, всё это делается силами CSS3, и в придачу не будем использовать картинки. Совсем.
Запускаем, видим окно
Открываем "Текст > Редактор шрифтов SVG...", появится справа панелька
Нажимаем на font 1, меняем на имя своего шрифта, например MySomeFont, правее поле *Гарнитура* очищаем.
Теперь открываем вкладочку *Глифы* всё на нашей панельке *Редактор шрифтов SVG*. Как мы видим, для нас уже добавили глифы английской раскладки. Можете все удалить, если мешаются, правой кнопкой мыши на них кликая. Так же можно редактирова имя глифа ну и символ, который он отождествляет
Займёмся добавкой самих картинок.
Импортируем "Файл > Импортировать..." (Ctrl+I) изображение, которое мы хотим включить в шрифт. Если это растровая грифика, после добавления нужно выполнить "Контур > Векторизовать растр" (Alt + Shift + B). Лично я в опциях не ковырялся, просто жмякаем на *OK* и создаётся уже векторное изображение.
Растровое удаляем (Выделяем и нажимаем клавишу Delete) - внизу в строке при выделении объекта пишется, какой он - растровый (Изображение) или векторный (Контур).
Далее растягиваем контур на рабочую область (в верхней панельке есть области ввода - x: 0, y: 0; Ш: 1000 и В: 1000). Оставляю контур выделенным, следуем в нашу любимую панельку *Редактор шрифтов SVG* во вкладочку *Глифы*. Теперь выделяем тот глиф, который мы хотим связать с нашим контуром. Пускай это будет глиф с символом *a*. Затем просто щёлкаем на кнопку *Получить кривые из выделения*. Чтобы проверить, всё ли мы правильно сделали, просто вводим добавленый символ в нижерасположенное поле *Текст* и должно отобразиться наше изображение. После проверки контур можно сдвинуть за рабочую область или удалить, он больше не нужен.
Так же мы можем ассоциировать все неиспользуемые символы в шрифте с каким либо контуром через *Взять из выделения* с текстом *Отсуствующий глиф* во вкладке *Глифы*. Операция проиходит как вышеописанная.
В общем добавили мы все контуры к нашим символам. Теперь надо подредактировать сам XML файл немножко. Открываем *Редактор XML* (Shift+Ctrl+X) - кнопочка есть на главной панели - четвёртая справа. И нам нужно изменить атрибут *id* у пункта * Ну в общем в общем и всё.
@font-face {
Так же наш SVG можно перегнать в другие форматы шрифтов, например в TTF с помощью сервиса onlinefontconverter .
font-family: "MySomeFont";
src: url("fonts/font.svg") format("svg");
}