Стандартные шрифты для сайта

Образцы русифицированных шрифтов

Шрифты бывают:

1) с засечками (семейство serif)
Шрифт {font-family:»Times New Roman»}

2) без засечек (семейство sans-serif)
Шрифт {font-family:Arial;}

3) моношрифты -символы имеют одинаковую ширину (семейство monospace)
Шрифт {font-family:Lucida Console}

 

По стилю различают шрифт:
Прямой (Roman), Курсивный (Italic), Полужирный (Bold), Нормальный (Regular, отличается от прямого меньшей толщиной штриха), Узкий (Narrow), Широкий (Wide). По ширине символов шрифты делят на моноширинные (как на старой печатной машинке) и пропорциональные.

Например, буква «I» будет намного уже, чем «W». В CSS — моноширинный шрифт выбирается или с помощью конструкции font-family: monospace, и/или указанием названия конкретного моно-шрифта. Параметр font-family определяет список семейств шрифтов.
Названия шрифтов перечисляются через запятую.
Если название семейства шрифта состоит из нескольких слов, оно должно быть помещено в кавычки. Список шрифтов начинается с желаемого шрифта и заканчивается названием общего семейства.

Если указанные по порядку шрифты не будут найдены на компьютере (не установлены), то браузер выберет доступный шрифт из общего семейства.

 

Пример CSS:

  1. {font-family:»Times New Roman», Times, serif; font-size:16pt; color:maroon;}
    Вид текста на странице САЙТА«Times New Roman» — шрифт по умолчанию в Window

     

  2. {font-family:Arial, Helvetica, sans-serif; font-size:16pt; color:blue;}
    Вид текста на странице САЙТА
  3. {font-family:Courier New, monospace; font-size:16pt; color:red;}
    Вид текста на странице САЙТА
  4. {font-family:Lobster, cursive; font-size:16pt; color:green;}
    Вид текста на странице САЙТА

 

Распространенные
русифицированные шрифты
Вид на странице Название шрифта
Шрифт — Arial
Шрифт — Arial Cyr
Шрифт — Arial Black
Шрифт — Book antiqua
Шрифт — Bookman old style
Шрифт — Calibri
Шрифт — Cambria
Шрифт — Candara
Шрифт — Century
Шрифт — Century gothic
Шрифт — Comic Sans Ms
Шрифт — Consolas
Шрифт — Constantia
Шрифт — Corbel
Шрифт — Courier
Шрифт — Courier New
Шрифт — Courier, monospace
Шрифт — Cursive
Шрифт — Franklin Gothic
Шрифт — Gabriola
Шрифт — Garamond
Шрифт — Georgia
Шрифт — Helvetica
Шрифт — Impact
Шрифт — Lucida console
Шрифт — Lucida Sans Unicode
Шрифт — Mistral (Mistral)
Шрифт — monospace
Шрифт — Monotype Corsiva
Шрифт — MS Sans Serif
Шрифт — MS Serif
Шрифт — Palatino Linotype
Шрифт — Sans-serif
Шрифт — Segoe print
Шрифт — Segoe script
Шрифт — Sylfaen
Шрифт — Tahoma
Шрифт — Times New Roman
Шрифт — Trebuchet ms
Шрифт — Verdana

 

Примеры русифицированных шрифтов

 

Как установить новые шрифты на компьютер
  1. Скачать из Интернет нужный шрифт на свой ПК.
  2. Распаковать скаченный архив.
  3. Способ 1:
    • Открыть любой шрифт (*.ttf) двойным кликом по нему и в появившемся окне нажимать кнопку «УСТАНОВИТЬ»
  4. Способ 2:
    • Открыть папку со шрифтами:
      Пуск —> Стандартные -> Панель управления —> Шрифты.
    • Скопировать (или перетащить) в эту папку скаченный и уже распакованный нужный шрифт.

 

 

 

вверх

 

Основные шрифты

Безопасные шрифты на примере CSS

При создании сайтов, одним из основных элементов является используемый шрифт.

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

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

Шрифты в языке CSS, назначаются элементам с помощью свойства .

Список безопасных шрифтов (21 штука) и их примеры:

font-family: Arial, Helvetica, sans-serif; font-family: ‘Arial Black’, Gadget, sans-serif; font-family: ‘Bookman Old Style’, serif; font-family: ‘Comic Sans MS’, cursive; font-family: Courier, monospace; font-family: ‘Courier New’, Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: ‘Lucida Console’, Monaco, monospace; font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif; font-family: ‘MS Sans Serif’, Geneva, sans-serif; font-family: ‘MS Serif’, ‘New York’, sans-serif; font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif; font-family: Symbol, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: ‘Times New Roman’, Times, serif; font-family: ‘Trebuchet MS’, Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: Webdings, sans-serif; font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается , , или (данные способы начертания шрифта есть всегда).

Arial
Имя шрифта: font-family: Arial, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Arial Black
Имя шрифта: font-family: ‘Arial Black’, Gadget, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Bookman Old Style
Имя шрифта: font-family: ‘Bookman Old Style’, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Comic Sans MS
Имя шрифта: font-family: ‘Comic Sans MS’, cursive;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier
Имя шрифта: font-family: Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier New
Имя шрифта: font-family: ‘Courier New’, Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Garamond
Имя шрифта: font-family: Garamond, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Georgia
Имя шрифта: font-family: Georgia, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Impact
Имя шрифта: font-family: Impact, Charcoal, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Console
Имя шрифта: font-family: ‘Lucida Console’, Monaco, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Sans Unicode
Имя шрифта: font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Sans Serif
Имя шрифта: font-family: ‘MS Sans Serif’, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Serif
Имя шрифта: font-family: ‘MS Serif’, ‘New York’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Palatino Linotype
Имя шрифта: font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Symbol
Имя шрифта: font-family: Symbol, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Tahoma
Имя шрифта: font-family: Tahoma, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Times New Roman
Имя шрифта: font-family: ‘Times New Roman’, Times, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Trebuchet MS
Имя шрифта: font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Verdana
Имя шрифта: font-family: Verdana, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Webdings
Имя шрифта: font-family: Webdings, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Wingdings
Имя шрифта: font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Вам понравились уроки?

Поддержите проект «Учебники для вебмастера»!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья

Статья создана: 24 Окт 2014

Статья обновлена: 5 Фев 2016

Следующая запись: CSS — работаем со шрифтом

Предыдущая запись: DOCTYPE в HTML

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

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:

‘sans-serif’: обычные шрифты без засечек
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
‘serif’: обычные шрифты с засечками
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
‘monospace’: шрифты фиксированной ширины
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
‘cursive’: шрифты, имитирующие почерк
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
‘fantasy’: декоративные шрифты, для названий и т.д..
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

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

правило serif sans-serif

Стили
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…

Насыщенность шрифта
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…

Варианты
Съешь же… Съешь же…
Съешь же… Съешь же…

Растяжение
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…
Съешь же… Съешь же…

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2018 W3C®

Created 17 Jan 2001;
Last updated Пт 12 янв 2018 20:13:27

.


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

Краткая инструкция:

  1. Скачайте шрифты по ссылке
  2. Скачайте ключ реестра (если файл не начнет качаться, кликните правой кнопкой по черному экрану и нажмите «сохранить как»).
  3. Разархивируйте архив со шрифтами, и скопируйте шрифты в папку C:/windows/fonts
  4. Запустите скачанный файл fonts.reg
  5. Перезагрузите компьютер.

Бывает, что шрифты в системе перестают быть читабельными по тем или иным причинам. Чтобы исправить эту проблему, вам понадобиться восстановление стандартных шрифтов. Это поможет возобновить изначальное шрифтовое оформление в windows

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

Компания Microsoft всегда заботилась о качестве используемых шрифтов в своей операционной системе и в программном обеспечении.  Начиная с Windows 98, в список стандартных шрифтов входили десятки лучших, и самых современных на тот момент гарнитур. К разработке новых начертаний привлекались самые известные и талантливые студии со всего мира. Помимо новых разработок, в стандартный набор входили и неоспоримые легенды типографики, например, Arial и Times New Roman.

Новые версии операционной системы не перестают радовать качественными новинками в области разработки шрифтов. Например, в Windows 8 и 10, появился шрифт Segoe UI, специально разработанный для Microsoft студией Monotype. В изначальном виде он имел название Segoe, и был разработан Monotype в 2000 году, для коммерческого распространения.

После того как шрифт перешел во владение Microsoft, он модернизировался специально под web, отсюда и приставка UI(user interface).

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

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

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

 


Добавить комментарий

Закрыть меню