Что такое шрифты CSS? - Улучшение внешнего вида сайта - httpdoc.ru

Что такое шрифты CSS?

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

Свойство CSS Font намного умнее, чем Тег шрифта HTML . Тег шрифта HTML использовался до HTML 4, но в HTML 5 он устарел. Вы больше не можете его использовать, но это был худший вариант по сравнению со свойством CSS Font.

У CSS Fonts есть несколько вариантов для придания стиля шрифтам. Вы можете изменить цвет, размер, вес и семейство шрифтов. Вы можете назначить сразу несколько семейств шрифтов в качестве замены, если одно из них не поддерживается. Давайте посмотрим на несколько свойств CSS Font и их использование:

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

Ценности Описание
Семейство шрифтов Назначьте тексту семейства шрифтов.
Цвет шрифта Задает цвет текста.
Стиль шрифта Делает шрифт полужирным, курсивом или наклонным.
Вариант шрифта Создает эффект маленькой заглавной буквы.
Размер шрифта Назначает размер шрифта.
Толщина шрифта Он контролирует толщину шрифта.

Семейство шрифтов CSS - что такое семейство шрифтов?

Семейства шрифтов - это набор разных шрифтов с похожим дизайном. Эти шрифты одного семейства различаются по размеру, весу и стилю, но основной дизайн персонажей будет таким же. Например, Arial - это семейство шрифтов со шрифтами Arial regular, Arial Bold, Arial Italic и т. Д.

Свойство CSS Font family позволяет назначать сразу несколько семейств шрифтов. Это не означает, что все семейства будут загружены и использованы вместе. Вместо этого будет использоваться второй, если браузер не поддерживает первый шрифт, и третий будет использоваться, если второй шрифт не поддерживается. Он работает в определенном порядке приоритета.

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Font Family </title> 
  <meta charset="UTF-8">
<style>
 #font{ 
  font-family: "Times New Roman", Times, serif;
 }

 #para{
  font-family: sans-serif;
 }
</style>
</head>

<body>
<h1 id="font">CSS font-family</h1>
<p  id="font">This is a paragraph, shown in the Times New Roman font.</p>
<p id="para">This is a paragraph, shown in the Arial font.</p>
</body>
</html>

Выход

CSS Font Family

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

Этот абзац выделен шрифтом Times New Roman.

Это абзац, выделенный шрифтом Arial.


Цвет шрифта CSS

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

Чтобы изменить цвет определенного раздела веб-сайта, такого как абзац и заголовки, всегда помогут селекторы классов, идентификаторов и тегов. Если вы не знаете о классах, идентификаторах и других селекторах, прочтите нашу статью о селекторах CSS .

Различные способы указания цвета шрифта

Есть три способа придать цвет шрифту:

  • Используйте название цвета: зеленый, синий, красный
  • Используйте шестнадцатеричный код для цветов: #ffffff (белый), # 000000 (черный). Воспользуйтесь нашим Инструмент выбора цвета
  • Используйте значения RGB: rgb (красный, зеленый, синий). (128, 0, 0) Бордовый, (165,42,42) Коричневый. Инструмент выбора RGB
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Font Color </title> 
  <meta charset="UTF-8">
<style>  
 h1 {
  color: green; 
 }
 h2 {
  color: #9000A1; 
 }
 p {
  color:rgb(100, 150, 99); 
 }
</style>  
</head>  

<body>  
<h1>This is heading 1</h1>  
<h2>This is heading 2</h2>  
<p>This is a paragraph.</p>  

</body>  
</html>

Выход

CSS Font Color

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

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

Это абзац.


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

font-size Свойство CSS font-size используется для указания размера шрифта. Размер по умолчанию 16px . Размер шрифта может быть указан в пикселях em(1em=16px) , или в процентах. Ниже приведены некоторые другие предопределенные значения:

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

Значения размера шрифта Описание
x-small Он отображает очень мелкий текст.
xx-маленький Он отображает очень мелкий текст.
небольшой Он отображает мелкий текст.
меньше Он отображает текст сравнительно меньшего размера.
Средняя Отображает средний размер текста.
большой Он отображает большой размер текста.
x-большой Он отображает очень большой размер текста.
xx-большой Он отображает очень большой размер текста.
больше Он отображает сравнительно больший размер текста.
Размер в пикселях или% Он устанавливает значение в процентах и ​​пикселях.

Вы можете проверить пример ниже, чтобы увидеть изменения, внесенные во все значения.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Font Size </title> 
  <meta charset="UTF-8">
</head> 
<body> 
 <p style="font-size:xx-small;"> This font size is extremely small.</p> 
 <p style="font-size:x-small;"> This font size is extra small</p> 
 <p style="font-size:smaller;"> This font size is smaller. </p> 
 <p style="font-size:small;"> This font size is small</p> 
 <p style="font-size:medium;"> This font size is medium. </p> 
 <p style="font-size:large;"> This font size is large. </p> 
 <p style="font-size:larger;"> This font size is larger. </p> 
 <p style="font-size:20px;"> This font size is 20 pixels. </p>  
 <p style="font-size:x-large;"> This font size is extra large. </p> 
 <p style="font-size:xx-large;"> This font size is extremely large. </p> 
 <p style="font-size:200%;"> This font size is set on 200%. </p> 
</body> 
</html>

Выход

CSS Font Size

Этот размер шрифта очень мал.

Этот размер шрифта очень маленький

Этот размер шрифта меньше.

Этот размер шрифта маленький

Этот размер шрифта средний.

Этот размер шрифта большой.

Этот размер шрифта больше.

Этот размер шрифта составляет 20 пикселей.

Этот размер шрифта очень большой.

Этот размер шрифта очень большой.

Размер шрифта установлен на 200%.


Стиль шрифта CSS

Свойство Font Styles в CSS используется для выделения шрифта курсивом. Курсивный шрифт слегка наклонен вправо.

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

  • стиль шрифта: нормальный;
  • стиль шрифта: курсив;
  • стиль шрифта: наклонный;
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Font Style </title> 
  <meta charset="UTF-8">
<style>
 p.normal {
  font-style: normal;
 }

 p.italic {
  font-style: italic;
 }

 p.oblique {
  font-style: oblique;
 }
</style>
</head>
<body>

<p class="normal">This paragraph is shown in normal style.</p>
<p class="italic">This paragraph  is shown in italic style.</p>
<p class="oblique">This paragraph is shown  in oblique style.</p>

</body>
</html>

Выход

CSS Font Style

Этот абзац отображается в обычном стиле.

Этот абзац выделен курсивом.

Этот абзац отображается наклонно.


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

Свойство варианта шрифта - это весело. Он изменяет шрифт на маленькие заглавные буквы. В шрифте Small-caps все строчные буквы заменяются на прописные, но их размер не меняется. Это означает, что измененные буквы верхнего регистра отображаются в размере букв нижнего регистра.

Есть два значения свойства font-variant:

  • вариант шрифта: нормальный;
  • вариант шрифта: капители;
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Font Variant </title> 
  <meta charset="UTF-8">
<style>  
 p { font-variant: small-caps; }  
 h2 { font-variant: normal; }  
</style>  
</head>  

<body>  
<h2>This heading is shown in normal font.</h2>  
<p>This paragraph is shown in small font.</p>  
</body>  
</html>

Выход

CSS Font Variant

Этот заголовок отображается обычным шрифтом.

Этот абзац отображается мелким шрифтом.


CSS Font Weight (Вес шрифта CSS)

font-weight Свойство CSS определяет вес шрифта, то есть его толщину. Он используется для выделения определенного фрагмента текста или заголовков.

Толщина шрифта может быть применена либо с использованием определенных текстовых значений, либо с помощью чисел:

  • шрифт: нормальный;
  • font-weight: светлее;
  • font-weight: жирный;
  • font-weight: 500;
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Font Weight </title> 
  <meta charset="UTF-8">
<style>
 p.normal {
  font-weight: normal;
 }

 p.light {
  font-weight: lighter;
 }

 p.thick {
  font-weight: bold;
 }

 p.thicker {
  font-weight: 900;
 }
</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

Выход

CSS Font Weight

Это абзац.

Это абзац.

Это абзац.

Это абзац.