Красивые шрифты для сайта by Google fonts — Поснов Андрей
Красивые шрифты для сайта by Google fonts
Jura
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
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
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
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
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
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-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 примеры отображения в браузере
Опубликовано Иванова Наталья
Смотреть все записи от Иванова Наталья