Логотип Валидатор Валидатор Качество создания сайта

ВЕБ-ШРИФТЫ

Типы шрифтов

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

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

Типы шрифтов

Типов шрифтов (именно типов) гораздо меньше, чем их разновидностей, хотя форматов разных и тут хватает! Хватает!

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

У себя в операционной системе нашёл такие типы шрифтов, как Вы видите на рисунке. Специально его сделал в фотошоп для наглядности.

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

Если обычному пользователю такое количество и не нужно вовсе, то веб-мастер обязан предоставить посетителю сайта возможность видеть его, как им было задумано. Ну, или же веб-дизайнером (если это разные люди).

Форматы шрифтов

Кроме тех форматов, что я написал на рисунке (.format), есть ещё.
Старый формат .eot, который понимают только браузеры Internet Explorer всех версий.

Новые форматы: .woff и .svg - здесь по-разному. Какие-то браузеры понимают, какие-то нет.  Путаница, короче! Да, уж!
Сделал ниже табличку их совместимости с разными браузерами.

 Internet ExplorerChromeOperaFirefoxSafariAndroid
.woff9,0+5,0+НЕТ3,6+НЕТНЕТ
.svgНЕТ1,0+9,0+3,5+3,1+НЕТ

К счастью(!), самый популярный формат - .ttf - понимают все современные браузеры.

Подключение шрифтов

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

Естественно, речь идёт об "экзотических" видах шрифтов.

Если нужно, файлы необычных шрифтов, которых нет на компьютере, можно подключить к веб-странице ИЗВНЕ.

Какие есть шрифты?

Есть несколько способов сделать это. Самый простой - использовать CSS.

Причём, и здесь есть несколько вариантов.

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

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

Потом посмотрите шрифт, которого у меня и "в помине нет", а есть только ссылка для его подключения.

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

Схемы подключения шрифтов

Для наглядности, схемы подключения шрифтов к веб-страницам выделил фоновым цветом.

Первая схема (свой шрифт):
1. Создаём папку на сервере. У меня, к примеру, - Каталогfonts
Закачиваем туда файлы шрифтов.

2. Прописываем правила для CSS.

  • <style type="text/css" rel="stylesheet">
    @font-face {     <— команда подключения
    font-family: "New Shrift";   <— указать семейство шрифта (если из двух и более слов, то в кавычках)
    src: url(fonts/newshrift.ttf);     <— полный путь до файла и имя файла (с расширением!)
    }

    #proba1 {     <— создаём правило (здесь: использовал селектор идентификаторов)
    font-family: "New Shrift";     <— указываем семейство шрифта
    font-weight: bold;     <— задаём жирность (здесь: жирный)
    font-size: 36px;     <— задаём размер
    color: red;     <— прописываем цвет (здесь: красный)
    }
    </style>

3. Используем созданное правило в коде HTML.

  • <p id="proba1">Тра-та-та, тра-та-та, на затылке чешуя!</p>     <— здесь выводится пример

**Prim.   "Из двух и более слов" в указании семейства шрифта означает, что они написаны через ПРОБЕЛ.
А, к примеру, семейство sans-serif считается одним словом, поскольку две части его соединены дефисом.
Для браузера это неразрывная цепочка символов, и кавычки НЕ НУЖНЫ!

* * *

Вторая схема (внешний шрифт):
1. Заходим на сервис Google по адресу - http://www.google.com/fonts/
Настраиваем его, т.е. выбираем шрифт, язык, отображение, и прочее. Получаем ссылку, которая является готовым тэгом подключения <link>

  • <link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic" type="text/css" rel="stylesheet">     <— пример полученного вида ссылки

2. Подключаем его, т.е. прописываем внутри тэга <head>

3. Прописываем правила для CSS.

  • Здесь уже не нужно давать комаду подключения. Мы уже его подключили в тэге head.
    <style type="text/css" rel="stylesheet">
    #proba7 {     <— создаём правило (здесь: использовал селектор идентификаторов)
    font-family: Lobster;     <— указываем семейство шрифта
    font-weight: 400;     <— задаём жирность (она БЕЗ "px";   здесь: нормальная)
    font-size: 36px;     <— задаём размер
    color: green;     <— прописываем цвет (здесь: зелёный)
    }
    </style>

4. Используем созданное правило в коде HTML.

  • <p id="proba7">Пишем то, что хотим вывести этим шрифтом.</p>     <— здесь выводится пример

* * *

Ну вот, собственно, и вся "нехитрая механика" подключения внешних шрифтов к своему сайту.
Для полной ясности нужно ещё кое-что сказать. Интересное!

Дальше, по коду, у меня идёт внутренняя таблица стилей CSS, перед выводом примеров. Обычно использую внешние, но не в этот раз.

Так вот.
Для удобства чтения кода, и для визуального отделения HTML от CSS применил способ "двойных комментариев".
Означает: внутри(!) тэгов <style>   </style> поставил символы <!--   -->, используемые для комментирования в кодах HTML.

Только не забывать!  Внутри этих символов, если нужны комментарии CSS-кода, как и положено, использовать его "родные звёзды" /*   */  Иначе, CSS-код может не работать.

Важно! Важно! Обязательно проверить, как сервер прописал имена файлов шрифтов.
Мой, к примеру, иногда "своевольничает" и, при загрузке файла, может сменить регистр символов его расширения. К чему такое приводит?

Компьютер отобразит текст на сайте только теми шрифтами, какие у него самого есть.
Как в песне: "... я тебя слепила из того, что было ...". Да!

* * *

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


Примеры подключения шрифтов

Внимание! Видеть примеры НОРМАЛЬНО смогут только те, кто пришёл с современными браузерами.   Символ "+" означает: начиная с указанной версии.

 Internet ExplorerChromeOperaFirefoxSafariAndroid
.ttf9,0+4,0+10,0+3,5+3,1+2,2+

TrueType Пример 1

Первым идёт один из моих самых любимых шрифтов: "BancoDi".
Его формат .ttf

Съешь ещё французской булки. Фантазию включить? Шрифты чужие подключить!


TrueType Пример 2

Следующим подключил также очень оригинальный, жирный шрифт: "Belukha".
И его формат тоже .ttf

Съешь возьми ещё французской булки. Фантазию включить? Шрифты нам чужие подключить!


TrueType Пример 3

Ещё один шрифт странного, но интересного начертания: "TagsXtreme".
Формат .ttf
Правда, русского языка он не поддерживает.

What are you doing? Go and eat French bulka!


TrueType Пример 4

И ещё один шрифт формата .ttf, но уже специального назначения: "ALSRubl".

Из примера подключения видно, для чего создан этот шрифт.

a b c d e f g h i j k l m n o p q r s   Вот так выглядит обычный текст, набранный этим же шрифтом.

Он для вывода символов Российского рубля на веб-страницах, а об особенностях работы с данным шрифтом узнаете (в новом окне) здесь: Исправление недостатков


Type1 Пример 5

Здесь подключил шрифт: "OPIUM-IT".

Для его подключения потребовалось целых 2 файла: .pfm и ещё вдобавок: .pfb
Причём!  Вспомогательный файл лучше НЕ переименовывать. Иначе вообще перестанет нормально открываться сам текстовой файл.

Съешь возьми ещё французской булки. Фантазию включить? Шрифты чужие подключить!


OpenType Пример 6

Это шрифт: "Anivers". Он имеет другое расширение: .otf Его тип OpenType. Это "симбиоз" Adobe™ и  Microsoft™.

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

Съешь возьми ещё 1 2 3 4 5 6 французских булок. Фантазию включить? Шрифты чужие подключить!


Какой формат? Пример 7

И наконец, шрифт: "Lobster".  Подключал уже с помощью GoogleFonts.
Его формат?   Да, я и сам не знаю! Какой дали!
Что дали на сервисе Google, то и подключил.

Однако, сами видите, - всё выводится отлично!
Шрифт имеет очень красивое начертание, стилизованное под "письмо от руки".

Съешь возьми ещё французской булки. Фантазию включить? Шрифты чужие подключить!



В заключение о веб-шрифтах

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

НО!

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

Обычно это делается всего один раз (если уж так сильно хочется Ну, сил нет!). И то - только лишь для отображения заголовков 1-ого уровня.

Каждый НЕ стандартный шрифт - это обращение к серверу.

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

Такие веб-шрифты, что есть в любой О.С., ещё называют "безопасными", т.е. нормально отображающимися на любых устройствах.

Изучая использование на сайтах разных шрифтов, сделал в фотошоп рисунок-шпаргалку.

Думаю, она и Вам пригодится: Смотреть

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

В фотошоп, понятное дело, не шрифты, а рисунки.
Однако ведь, ничего не мешает сдублировать нарисованный текст в абзац, и с помощью свойства того же CSS  position, "закинуть его за горизонт", дав ему значение: -9999px.

Или же, если БЕЗ позиционирования, можно прописать ему отступ, как
показано в примере ниже.

  • Прячем текст с помощью отступа.
    h1 {     <— создаём правило (здесь: использовал селектор тэгов)
    background: url(images/picture.jpg);     <— указываем адрес фонового рисунка
    width: 800px;     <— прописываем ширину этого рисунка (здесь: свою ширину написал)
    height: 150px;     <— пишем его высоту
    text-indent: -9999px;     <— прописываем ОТСТУП для текста, которому он служит фоном
    overflow: hidden;     <— прячем текст, выступающий за пределы фонового рисунка
    }

Таким образом "убиваем" сразу "3-ёх зайцев"! Одним правилом!

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

* * *

Полагаю, показал достаточно много и наглядно о подключении веб-шрифтов. Хочу лишь добавить, что в разделе моего сайта "Полезное" найдёте очень хорошую книгу, в которой подробно описываются "Основы создания шрифтов".


ВВЕРХ

На сайты

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru