Нестандартные шрифты в html через @font-face

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

Нужный минимум

CSS-код для подключения шрифта выглядит следующим образом:

В параметре font-family необходимо указать наименование шрифта (не начертания!). Это семантически правильно и весьма комфортно, вместо того, дабы показывать что-то типа pt_sans либо my-ptsans-font .
Параметры src должны содержать пути до шрифтов разнообразных форматов, дабы обеспечить кроссбраузерность (как взять все эти файлы, просматривайте ниже). Для формата SVG, через знак #. нужно указать начертание подключаемого шрифта. В нашем случае это PT Sans Regular (если бы мы подключали жирное начертание, эта строка смотрелась бы как PT Sans Bold и т.п.)
В параметре font-weight необходимо указать жирность шрифта. Самые распространённые значения: normal и bold. Но возможно указать и другие, в соответствии с спецификации CSS .
Параметр font-style информирует, есть ли шрифт курсивным. В случае если это так, укажите italic. В случае если нет — покиньте normal

Так, вы сможете применять собственный шрифт как и любой простой, не вспоминая о том, что он внешний.

Лирическое отступление

Многие обожают показывать в font-family свойства начертания (к примеру, pt_sans_bold ), а font-weight и font-style оставлять в значении normal .

Это совсем неверный подход. По причине того, что вам нужно всецело отказаться от font-weight и font-style везде, а дабы задать жирность либо курсив, всегда переназначать font-family. Так как браузер не знает, что pt_sans_bold в действительности жирный.

Предположим, вы выяснили таким способом два начертания: простое (font-family: pt_sans_regular ) и жирное (font-family: pt_sans_bold ). После этого решили какой-то элемент сделать жирным, и прописали для него font-weight: bold;. Браузер, не отыскав в гарнитуре нужного начертания (он будет искать font: bold pt_sans_regular; ), постарается сделать жирный шрифт из простого. Текст в таковой ситуации будет совсем не похож на настоящий bold.

Данный эффект затронет все теги b. strong. i и em (они будут смотреться не так, как должны).

Да и по большому счету, вы же пишете font: bold 12px Arial;. а не font: 12px arial_bold; =)

Облачные сервисы

Возвращаясь к вопросу создания пригодных для веба шрифтов, нельзя не отметить сервисы, каковые разрешат вам кроме того не обращаться к написанию CSS-кода.

Гугл Fonts

Одним из самых популярных и эргономичных сервисов есть Гугл Fonts. Его каталог содержит более 250 гарнитур, из которых более 50 поддерживают кириллицу. Сервис имеет несложной пошаговый интерфейс с возможностью выбора начертаний, метода и языка

подключения шрифта (добавьте в собственный код одну строчок, и вот на сайте уже новый шрифт!).

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

webfont.ru

webfont.ru — русскоязычный сервис, предоставляющий функционал, подобный Гугл Fonts, и имеющий ещё кучу всяких полезностей для работы с веб-шрифтами. Коллекция складывается из более чем 450 шрифтов, из которых более 300 — с кириллицей. Процедура подключения шрифта весьма несложна.

Платные сервисы

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

Приобрести возможно как «настольную» версию, так и конкретно webfont. Не забудьте перед приобретением почитать условия. Вот ссылки на кое-какие платные каталоги:

webfont-генераторы

В случае если у вас имеется файл шрифта, и вы желаете его применять на сайте, без особых генераторов не обойтись. Я обрисую самые популярные сервисы.

FontSquirrel

FontSquirrel — самый качественный сейчас сервис конвертации шрифтов. Поддерживает множественную конвертацию (до 4 файлов в один момент), сходу генерирует CSS-файл для подключения. Важно, что сконвертированные шрифты не имеют визуальных отличий от оригинала.

Имеет множество настроек, благодаря которым возможно добиться нужного результата.

Если вы новичок, то смело применяйте режим Basic и не вспоминайте.

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

Единственная неприятность FontSquirrel в том, что кое-какие шрифты внесены в «тёмный перечень» по просьбе правообладателей, и вы не сможете взять их веб-версии (к примеру, Segoe UI, Myriad Pro и другие).

В этом случае вам окажут помощь другие webfont-генераторы. Не такие эргономичные, но однако.

Online Font Converter

Мой любимый сервис, по окончании FontSquirrel. Online Font Converter всегда совершенствуется, и на момент написания статьи владел несложным интерфейсом, создать веб-шрифт в котором — сущие мелочи. Минус конвертера в том, что он не имеет настроек. Но поддерживает множественную загрузку и конвертирует любые шрифты, если вы понимате о чём я =)

Данный сервис также создаёт качественный webfont, что отображается как оригинал.

Источник: verstka.pro

Финансовая жизнь