Стандартные Web-шрифты

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

Ниже будут шрифты которые вы можете смело применять, не опасаясь отобразится ли правильно шрифт на странице.

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

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

Подведем краткий итог всему вышесказанному, итак:

  1. Стандартных web-шрифтов не существует;
  2. Существует набор шрифтов который есть практически на каждом компьютере.

В перечень шрифтов может включать один или несколько, при этом они разделяются запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, его нужно заключить в одинарные или двойные кавычки. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace.

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

То есть при записи вида:

h1 {
font-family: 'Trebuchet MS', Verdana, Arial, sans-serif;
}

Браузер попробует сначала отобразить шрифт Trebuchet MS, если его нет то Verdana, затем Arial, если вдруг и его не найдет, то применит тот шрифт семейства (типа)sans-serif который он "знает", то есть который установлен на компьютере.

Шрифты подразделяются на:

  • serif — шрифты с засечками (антиквенные), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • cursive — курсивные шрифты;
  • fantasy — декоративные шрифты;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

Шрифты с засечками - serif

CSS код:
h1 {
font-family: Georgia, serif;
font-size:26px;
}
p {
font-family: Georgia, serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: "Palatino Linotype", serif;
font-size:26px;
}
p {
font-family: "Palatino Linotype", serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: "Book Antiqua", serif;
font-size:26px;
}
p {
font-family: "Book Antiqua", serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: "Times New Roman", serif;
}
p {
font-family: "Times New Roman", serif;
}

Пример:

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

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

Шрифты без засечек - Sans-Serif

CSS код:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size:26px;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: 'Arial Black', Gadget, sans-serif;
font-size:26px;
}
p {
font-family: 'Arial Black', Gadget, sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size:26px;
}
p {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: Impact, Charcoal, sans-serif;
font-size:26px;
}
p {
font-family: Impact, Charcoal, sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: 'Lucida Sans Unicode', sans-serif;
font-size:26px;
}
h1 {
font-family: 'Lucida Grande', sans-serif;
font-size:26px;
}
p {
font-family: 'Lucida Sans Unicode', sans-serif;
font-size:16px;
}
p {
font-family: 'Lucida Grande', sans-serif;
font-size:16px;
}

Пример:

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

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

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

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

CSS код:
h1 {
font-family: 'Monotype Corsiva', sans-serif;
font-size:26px;
}
p {
font-family: 'Monotype Corsiva', sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: Segoe, sans-serif;
font-size:26px;
}
p {
font-family: Segoe, sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: 'Segoe UI', sans-serif;
font-size:26px;
}
p {
font-family: 'Segoe UI', sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: 'Segoe Print', sans-serif;
font-size:26px;
}
p {
font-family: 'Segoe Print', sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: Tahoma, Geneva, sans-serif;
font-size:26px;
}
p {
font-family: Tahoma, Geneva, sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size:26px;
}
p {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size:26px;
}
p {
font-family: Verdana, Geneva, sans-serif;
font-size:16px;
}

Пример:

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

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

Моноширинные шрифты - Monospace

CSS код:
h1 {
font-family: 'Courier New', Courier, monospace;
font-size:26px;
}
p {
font-family: 'Courier New', Courier, monospace;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family:'Lucida Console', Monaco, monospace;
font-size:26px;
}
p {
font-family:'Lucida Console', Monaco, monospace;
font-size:16px;
}

Пример:

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

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

CSS код:
h1 {
font-family:'DejaVu Sans Mono', monospace;
font-size:26px;
}
p {
font-family:'DejaVu Sans Mono', monospace;
font-size:16px;
}

Пример:

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

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