Семейство шрифтов

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

Font-family пример использования на сайте

1. Что такое font-family? -> как переводится
2. Font-family как использовать на сайте
3. Пример вывода текста с font-family
4. Еще о font-family
5. P.S.

Что такое font-family? -> как переводится

С самого начала нашего повествования нужно перевести данную фразу font-family

Как переводится font-family?

Наверное вы догадались, что мы имеем дело с двумя словами английского языка:

Слово font - переводится как шрифт.

Слово family - переводится как семья.

Итого: font-family - переводится как семейство шрифтов

Что такое font-family?

Как уже написано выше font-family переводится как семейство шрифтов.

Все шрифты делятся на семейства такие как:

Serif шрифты данного семейства имеют небольшие засечки на концах символов. Примеры шрифтов данного семейства: Times New Roman, Georgia.

Sans-Serif шрифты данного семейства не имеют засечек. Примеры: Arial, Arial Black, Trebuchet MS, Verdana.

Monospace font-family - все символы шрифтов данного семейства занимают одинаковую ширину. Примеры: Courier New.

Fantasy font-family - семейство "причудливых" шрифтов использующихся в основном для создания красочных заголовков. Примеры: Impact

Cursive font-family семейство шрифтов рукописного начертания. Примеры: Comic Sans MS.

Безопасный font-family

Как написано в учебнике, что существуют безопасные шрифты, отображение которых практически на 100% вероятно это:

• Arial
• Arial Black
• Courier New
• Comic Sans MS
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana



Font-family как использовать на сайте

Как вы наверное уже знаете, что стили css можно использовать тремя способами! и font-family соответственно также можно использовать тремя способами:

Использование font-family в теге? с использование атрибута style:

<p style='font-family:Arial;'>Пример шрифта Arial.</p>

Использование font-family в теге style на странице, стили можно прикрепить, к тегу, классу(class), идентификатору(id)? например:

<style>
.example { font-family:Arial;
}
</style>


Использование font-family внутри файла стилей css :

Пример




Пример вывода текста с font-family

И несколько примеров использования font-family на странице сайта, возьмем самый простой способ поставим font-family внутрь тега:

<p style='font-family:Arial;'>Пример шрифта Arial.</p>

Примеры вывода текста с измененным font-family

Пример шрифта Arial.

Пример шрифта Arial Black.

Пример шрифта Comic Sans MS.

Пример шрифта Courier New.

Пример шрифта Georgia.

Пример шрифта Impact.

Пример шрифта Times New Roman.

Пример шрифта Trebuchet MS.

Пример шрифта Verdana.




Еще о font-family

Мне кажется они забыли добавить, что есть возможность подключения и вывода вообще любого шрифта с помощью @font-face - о чем мы поговорим как-нибудь в другой раз…

+

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

+

/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Arial, если на компьютере нет Arial, то будет использоваться один из шрифтов

семейства Sans-Serif имеющихся на компьютере */

p {font-family:Verdana,Arial,sans-serif;} +

И еще следует добавить что:

Некоторые font-family - не поддерживают кириллицу... поэтому, прежде чем использовать font-family, следует уточнить, есть ли поддержка кириллицы...




P.S.

Некоторые вещи действительно очень скучные – font-family – это всего лишь отображение вашего написанного текста и ничего более! И наверное вы должны спросить, а почему же скучная тема - вы один раз это настроите на своем сайте и больше никогда к этому можете и не возвращаться... и конечно же , чтобы их настроить и установить - это нужно знать, как это работает и где у него кнопка © !

Но с другой стороны, если вдуматься, то выбранный отвратительный font-family – будет только отталкивать ваших потенциальных адептов! И с этой же стороны font-family - имеет огромное значение! И как бы странно это не звучало, но по моему мнению лучше использовать стандартные параметры, которые привычны для любого человека…