Css красивые шрифты: Шрифты для сайта в CSS – Красивые шрифты от Google Web Fonts

Содержание

Красивые шрифты для сайта by Google fonts — Поснов Андрей

Красивые шрифты для сайта by Google fonts

Jura

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Jura&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h2 { font-family: ‘Jura’, arial, serif; }

Ruslan Display

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Ruslan+Display&subset=cyrillic,latin’                                                                    rel=’stylesheet’ type=’text/css’></link>

CSS
h2 { font-family: ‘Ruslan Display’, arial, serif; }

Play

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Play&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’>

</link>

CSS
h2 { font-family: ‘Play’, arial, serif; }

Didact Gothic

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Didact+Gothic&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h2 { font-family: ‘Didact Gothic’, arial, serif; }

Open Sans Condensed

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h2 { font-family: ‘Open Sans Condensed’, arial, serif; }

Lobster

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h2 { font-family: ‘Lobster’, arial, serif; }

 

Красивые шрифты для сайта by Google fonts

CSS Веб шрифты


Часто используемые комбинации шрифтов

Свойство font-family должно содержать несколько имен шрифтов как "запасной", чтобы обеспечить максимальную совместимость между браузерами / операционными системами. Если браузер не поддерживает первый шрифт, он пробует следующий.

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

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


Шрифт Serif

font-family Пример текста
Georgia, serif

Это заголовок

Это параграф

"Palatino Linotype", "Book Antiqua", Palatino, serif

Это заголовок

Это параграф

"Times New Roman", Times, serif

Это заголовок

Это параграф


Шрифты Sans-Serif

font-family Пример текста
Arial, Helvetica, sans-serif

Это заголовок

Это параграф

"Arial Black", Gadget, sans-serif

Это заголовок

Это параграф

"Comic Sans MS", cursive, sans-serif

Это заголовок

Это параграф

Impact, Charcoal, sans-serif

Это заголовок

Это параграф

"Lucida Sans Unicode", "Lucida Grande", sans-serif

Это заголовок

Это параграф

Tahoma, Geneva, sans-serif

Это заголовок

Это параграф

"Trebuchet MS", Helvetica, sans-serif

Это заголовок

Это параграф

Verdana, Geneva, sans-serif

Это заголовок

Это параграф

Шрифты Monospace

font-family Пример text
"Courier New", Courier, monospace

Это заголовок

Это параграф

"Lucida Console", Monaco, monospace

Это заголовок

Это параграф

Совет: Также проверить все доступные Google Шрифты и как ими пользоваться.


СSS Шрифты



CSS свойство font задает шрифту, утолшение, размер и стиль текста.


Разница между Serif и Sans-serif


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

В CSS, существует два типа имен семейства шрифтов:

  • Стандартные семейства - группа семейств шрифтов с похожим видом "Serif" или "Monospace"
  • Семейства шрифтов - конкретный шрифт "Times New Roman" или "Arial"
Стандартные семейства Семейства шрифтов Описание
Serif Times New Roman
Georgia
Шрифты с засечками имеют небольшие линии на концах некоторых букв
Sans-serif Arial
Verdana
"Sans" без засечек - шрифты не имеют засечки на концах букв
Monospace Courier New
Lucida Console
Моноширинный шрифт все буквы имеют одинаковую ширину

Примечание: На экранах компьютеров, без засечек шрифты легче читать, чем шрифты с засечками.


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

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

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

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

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

Более одного семейства шрифтов указывать через запятую:

Для часто используемых сочетаний шрифта, посмотрите на наши Безопасные Комбинации Веб Шрифтов.


Стиль шрифта

Свойство font-style в основном используется для установки курсивного текста.

Свойство имеет три значения:

  • normal - Текст отображается нормально
  • italic - Текст отображается курсивом
  • oblique - Текст отображается наклонным, он очень похож на курсив, но менее поддерживается браузерами

Пример

p.normal {
   font-style: normal;
}

p.italic {
   font-style: italic;
}

p.oblique {
   font-style: oblique;
}

Редактор кода »

Размер шрифта

Свойство font-size устанавливает размер шрифта текста.

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

Всегда используйте правильные теги HTML, для заголовка <h2> - <h6> и <p> для параграфа.

Значение свойства font-size может быть размер абсолютный или относительный

Абсолютный размер:

  • Задает указанный размер текста
  • Не позволяет пользователю менять размер шрифта во всех браузерах (плохо по соображениям доступности)
  • Абсолютные величины полезны, когда известен результат физического размера

Относительный размер:

  • Задает размер относительно окружающих элементов
  • Позволяет пользователю менять размер шрифта в браузерах

Примечание: Если не указать размер шрифта, размер по умолчанию будет как обычный текст параграфа 16px (16px=1em) .


Размер шрифта в процентах

Настройка размера текста с пикселями дает Вам полный контроль над размером текста:

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


Размер шрифта в em

Чтобы разрешить пользователям изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.

Размер в em рекомендуется консорциумом W3C.

1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах 16 пикселей. Значит, размер по умолчанию 1em составляет 16px.

Размер может быть вычислен из пикселей в em, используя эту формулу: px / 16 = em

Пример

h3 {
   font-size: 2.5em; /* 40px/16=2.5em */
}

h4 {
   font-size: 1.875em; /* 30px/16=1.875em */

}

p {
   font-size: 0.875em; /* 14px/16=0.875em */
}

Редактор кода »

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

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


Используйте сочетание % и em

Решение, которое работает во всех браузерах, установит размер шрифта по умолчанию в процентах для елемента <body>:

Пример

body {
   font-size: 100%;
}

h3 {
   font-size: 2.5em;
}

h4 {
   font-size: 1.875em;
}

p {
   font-size: 0.875em;
}

Редактор кода »

Наш код теперь работает отлично! Показывает тот же самый размер текста во всех браузерах и все браузера позволяют увеличить или изменить размер текста!


Полнота шрифта

Свойство font-weight задает полноту шрифта:


Варианты шрифта

Свойство font-variant указывает, должен ли текст отображаться в малом прописном шрифте.

Значение шрифта

small-caps, устанавливает все строчные буквы в большом прописном шрифте. Тем не менее, заглавные буквы будут выглядеть на размер больше, тем оригинальней будут выглядеть заглавные буквы в тексте.


Еще примеры

Все свойства шрифта в одном объявлении
В этом примере показано, как использовать свойство сокращения для установки всех свойств шрифта в одном объявлении.


Проверьте себя с помощью упражнений!


Все CSS свойства шрифтов

Свойство Описание
font Устанавливает все свойства шрифта в одном объявлении
font-family Устанавливает шрифт для текста
font-size Устанавливает размер шрифта текста
font-style Устанавливает стиль шрифта для текста
font-variant Указывает, должен ли текст должен отображаться в малым прописным шрифтом
font-weight Устанавливает полноту шрифта

Шрифты HTML

Тег <font> определяет все атрибуты шрифта. С его помощью мы можем указать тип, размер, цвет и некоторые другие свойства. По умолчанию браузеры используют шрифт Times Roman, но если вы захотите изменить шрифт, это несложно сделать с помощью атрибута , но нужно иметь ввиду, что тот шрифт, какой вы укажете, может отсутствовать у пользователя, читающего вашу страничку, может не оказаться такого шрифта в системе, и он увидит тогда ваш текст в той кодировке, которая у него установлена по умолчанию. Но эту проблему можно решить другим способом: указать браузеру не один, а несколько похожих шрифтов.

Читайте также, как изменить цвет, размер текста html

Список кодов некоторых шрифтов html

Шрифт Arial <font face="Arial">Шрифт Arial</font> Шрифт Arial black <font face="Arial black">Шрифт Arial black</font>
Шрифт Arial Narrow <font face="Arial Narrow">Шрифт Arial Narrow</font> Шрифт Book Antiqua <font face="Book Antiqua">Шрифт Book Antiqua</font>
Шрифт Bookman Old Style <font face="Bookman Old Style">Шрифт Bookman Old Style</font> Шрифт Comic Sans MS
<font face="Comic Sans MS">Шрифт Comic Sans MS</font>
Шрифт Courier <font face="Courier">Шрифт Courier</font> Шрифт Courier new <font face="Courier new">Шрифт Courier new</font>
Шрифт Century Gothic <font face="Century Gothic">Шрифт Century Gothic</font> Шрифт Garamond <font face="Garamond">Шрифт Garamond</font>
Шрифт Georgia <font face="Georgia">Шрифт Georgia</font> Шрифт Impact <font face="Impact">Шрифт Impact</font>
Шрифт Lucida Console <font face="Lucida Console">Шрифт Lucida Console</font> Шрифт Lucida Sans Unicode <font face="Lucida Sans Unicode">Шрифт Lucida Sans Unicode</font>
Шрифт Microsoft Sans Serif <font face="Microsoft Sans Serif">Шрифт Microsoft Sans Serif</font> Шрифт Helvetica <font face="Helvetica">Шрифт Helvetica</font>
Шрифт Verdana <font face="Verdana">Шрифт Verdana</font> Шрифт Times New Roman <font face="Times New Roman">Шрифт Times New Roman</font>

Шрифты html примеры отображения в браузере

Опубликовано Иванова Наталья

Смотреть все записи от Иванова Наталья

Навигация по записям

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *