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

Верстка

Рисунок Подбор шрифта для сайта
Подбор шрифта для сайта Подбор шрифта для сайта
оценка: 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
Категория:Верстка
Просмотрено:14657
Рейтинг:5.0/5
Дата добавления:2012-12-27 15:37, Четверг
Добавил:Szen
Теги:наименование шрифта, тип шрифта, Шрифт, подбор шрифта

Мини-форум

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

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

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



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