Свойства CSS шрифта определяют семейство шрифтов, смелостью, размер и стиль текста.
Разница между засечками и без засечек шрифты
Семьи CSS Font
В CSS существует два типа имен семейств шрифтов:
- родовой семьи - группа семейств шрифтов с подобным взглядом (как "Serif" или "") шрифт фиксированной
- семейство шрифтов - специфический семейство шрифтов (например , "Times New Roman" или "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | Примечание: На экранах компьютеров, без засечек шрифты считаются более удобными для чтения , чем засечек шрифты. |
|---|
Семейство шрифтов
Семейство шрифтов текста задается с помощью font-family собственности.
font-family свойство должно содержать несколько имен шрифта в качестве системы "запасного варианта". Если браузер не поддерживает первый шрифт, он пытается следующий шрифт, и так далее.
Начните с шрифта, который вы хотите, и заканчиваются общей семьей, чтобы браузер выбрать аналогичный шрифт в общей семье, если никакие другие шрифты не доступны.
Примечание: Если имя семейства шрифтов больше , чем одно слово, оно должно быть заключено в кавычки, как: "Times New Roman".
Более одного семейства шрифтов указывается в списке через запятую:
Для наиболее часто используемых шрифтов комбинаций, смотрите на нашем Web Safe сочетаний шрифтов .
Стиль шрифта
font-style свойство в основном используется для указания курсивного текста.
Это свойство имеет три значения:
- нормальный - текст отображается нормально
- наклонным - текст выделен курсивом
- косые - Текст "наклоняясь" (косая очень похож на курсив, но менее поддерживается)
пример
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Попробуй сам " Размер шрифта
font-size свойство устанавливает размер текста.
Будучи в состоянии управлять размер текста играет важную роль в веб-дизайне. Тем не менее, вы не должны использовать корректировки размер шрифта, сделать пункты выглядеть заголовками, или заголовки похожи на параграфы.
Всегда используйте соответствующие HTML-теги, как <h1> - <h6> для заголовков и <p> для параграфов.
Значение размера шрифта может быть абсолютным, или относительный размер.
Абсолютный размер:
- Устанавливает текст определенного размера
- Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)
- Абсолютный размер полезен, когда физический размер выводимого известен
Относительный размер:
- Устанавливает размер относительно окружающих элементов
- Позволяет пользователю изменять размер текста в браузерах
| Примечание: Если вы не указываете размер шрифта, размер по умолчанию для обычного текста, как абзацы, 16px (16px = 1em). |
|---|
Установить размер шрифта пикселями
Установка размера текста с пикселями дает вам полный контроль над размер текста:
Совет: Если вы используете пиксели, вы все еще можете использовать инструмент масштабирования , чтобы изменить размер всей страницы.
Установить размер шрифта С Em
Чтобы разрешить пользователям изменять размер текста (в меню браузера), многие разработчики используют EM вместо пикселов.
Размер блока EM рекомендуется W3C.
1em равен текущему размеру шрифта. размер шрифта по умолчанию в браузерах 16px. Таким образом, по умолчанию размер 1em является 16px.
Размер может быть рассчитано из пикселей в EM , используя эту формулу:пикселей/ 16 =EM
пример
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} Попробуй сам " В приведенном выше примере, размер текста в ЕМ является такой же, как и в предыдущем примере в пикселях. Тем не менее, с размером их, можно настроить размер текста во всех браузерах.
К сожалению, все еще существует проблема с более старыми версиями IE. Текст становится больше, чем он должен, когда сделано больше, и меньше, чем должен, когда становится меньше.
Использование комбинации процентов и Em
Решение, которое работает во всех браузерах, чтобы установить размер шрифта по умолчанию в процентах для элемента <тела>:
пример
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Попробуй сам " Наш код теперь работает отлично! Это показывает тот же размер текста во всех браузерах, и позволяет все браузеры, чтобы увеличить или изменить размер текста!
шрифт Вес
font-weight свойство задает вес шрифта:
шрифт Вариант
font-variant свойство определяет , должен ли текст отображаться в шрифте малых заглавных букв.
В шрифтах малых заглавных букв, все буквы нижнего регистра преобразуются в буквы верхнего регистра. Тем не менее, преобразованные заглавных букв появляется в меньшем размере шрифта, чем исходные заглавными буквами в тексте.
Еще примеры
Все свойства шрифта в одной декларации
Этот пример демонстрирует, как использовать сокращённое свойство для установки всех свойств шрифта в одной декларации.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »
Все свойства CSS Font
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |