Подбор шрифта для сайта

Верстка

Рисунок Подбор шрифта для сайта
Подбор шрифта для сайта Подбор шрифта для сайта
оценка: 5.0 из 5
оценок: 5

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

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

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

Шрифт - графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка.

1. Arial

Пример отображения шрифта Arial в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Arial:

CSS-код шрифта Arial
font-family: 'Arial', 'Helvetica', sans-serif;

2. Arial Black

Пример отображения шрифта Arial Black в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Arial Black:

CSS-код шрифта Arial Black
font-family: 'Arial Black', 'Gadget', sans-serif;

3. Comic Sans MS

Пример отображения шрифта Comic Sans MS в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Comic Sans MS:

CSS-код шрифта Comic Sans MS
font-family: 'Comic Sans MS', cursive;

4. Courier New

Пример отображения шрифта Courier New в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Courier New:

CSS-код шрифта Courier New
font-family: 'Courier New', 'Courier', monospace;

5. Georgia

Пример отображения шрифта Georgia в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Georgia:

CSS-код шрифта Georgia
font-family: 'Georgia', serif;

6. Impact

Пример отображения шрифта Impact в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Impact:

CSS-код шрифта Impact
font-family: 'Impact', 'Charcoal', sans-serif;

7. Lucida Console

Пример отображения шрифта Lucida Console в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Lucida Console:

CSS-код шрифта Lucida Console
font-family: 'Lucida Console', 'Monaco', monospace;

8. Lucida Sans Unicode

Пример отображения шрифта Lucida Sans Unicode в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Lucida Sans Unicode:

CSS-код шрифта Lucida Sans Unicode
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

9. MS Sans Serif

Пример отображения шрифта MS Sans Serif в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта MS Sans Serif:

CSS-код шрифта MS Sans Serif
font-family: 'MS Sans Serif', 'Geneva', sans-serif;

10. MS Serif

Пример отображения шрифта MS Serif в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта MS Serif:

CSS-код шрифта MS Serif
font-family: 'MS Serif', 'New York', serif;

11. Palatino Linotype

Пример отображения шрифта Palatino Linotype в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Palatino Linotype:

CSS-код шрифта Palatino Linotype
font-family: 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif;

12. Tahoma

Пример отображения шрифта Tahoma в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Tahoma:

CSS-код шрифта Tahoma
font-family: 'Tahoma', 'Geneva', sans-serif;

13. Times New Roman

Пример отображения шрифта Times New Roman в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Times New Roman:

CSS-код шрифта Times New Roman
font-family: 'Times New Roman', serif;

14. Trebuchet MS

Пример отображения шрифта Trebuchet MS в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Trebuchet MS:

CSS-код шрифта Trebuchet MS
font-family: 'Trebuchet MS', 'Helvetica', sans-serif;

15. Verdana

Пример отображения шрифта Verdana в браузере:
Съешьте ещё этих мягких французских булок, 0123456789.

Картинка отображения шрифта Verdana:

CSS-код шрифта Verdana
font-family: 'Verdana', 'Geneva', sans-serif;

Итог

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

Наибольшей популярностью в WEB-дизайне пользуются шрифты семейства Arial, Comic Sans MS, Courier New, Georgia, Tahoma и Verdana. Шрифты семейства Times New Roman используются, в основном, для периодики: газет и журналов. Шрифты семейства MS Serif не умеют отображать кириллические символы и используются для иммитации строк командной строки.

На этом все. Подписывайтесь, ставьте звездочки! Удачи в свершениях!

Не по теме. На десерт гайд по созданию собственного шрифта с помощью бесплатных программ.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Подбор шрифта для сайта
Верстка
Скрипты, инструкции, справочники

rss
Категория:Верстка
Просмотрено:14574
Рейтинг:5.0/5
Дата добавления:2012-12-27 15:37, Четверг
Добавил:Szen
Теги:наименование шрифта, тип шрифта, Шрифт, подбор шрифта

Мини-форум

№ 02012-12-27 15:37
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Подбор шрифта для сайта".
Гость
Учавствовать в обсуждении "Подбор шрифта для сайта" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким файл-хостингом вы пользуетесь?
Всего ответов: 393
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 1
Гостей: 1
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz