FrontendBook - Как изменить шрифт с помощью HTML

Как изменить шрифт с помощью HTML

Еще во времена HTML4 существовал <font> тег, который можно было использовать для изменения размера шрифта, семейства шрифтов и цвета текста.

Но в HTML5 этот <font> тег устарел. Поэтому, если вы хотите изменить что-либо, связанное со шрифтом, вы должны сделать это с помощью CSS.

В этой статье я покажу вам, как изменить размер шрифта, толщину шрифта, стиль шрифта и семейство шрифтов текста с помощью CSS.

Как изменить размер шрифта текста

Размер шрифта текста показывает, насколько велик этот текст.

Чтобы изменить размер шрифта некоторого текста, вам нужно использовать font-sizeсвойство, а затем указать значение в пикселях (px), rem, или em.

Вы можете сделать это, используя встроенный CSS, например:


<h1 style="font-size: 4rem">FrontendBook</h1>

Вы также можете сделать это во встроенном или внутреннем CSS:


<style>
    h1 {
        font-size: 4rem;
    }
</style>

И, наконец, вы можете сделать это во внешнем CSS:


h1 {
        font-size: 4rem;
    }

Как изменить толщину шрифта текста

Font-weight — это свойство, которое помогает установить, насколько жирным или светлым будет определенный текст.

Вы можете использовать font-weight для изменения яркости или полужирности текста, а затем присвоить ему значение, например normal, lighter, bold или bolder. Вы также можете использовать такие значения, как 100, 200, 500 и т. д.

Как и размер шрифта, вы можете изменить толщину шрифта во встроенном, встроенном или внешнем CSS.


<div>
   <h1 style="font-weight: lighter">FrontendBook Lighter</h1>
   <h1 style="font-weight: normal">FrontendBook Normal</h1>
   <h1 class="bold" style="font-weight: bold">FrontendBook Bold</h1>
   <h1 style="font-weight: bolder">FrontendBook Bolder</h1>
</div>



<style>
    .lighter {
      font-weight: lighter;
    }

    .normal {
      font-weight: normal;
    }

    .bold {
      font-weight: bold;
    }

    .bolder {
      font-weight: bolder;
    }
</style>



.lighter {
      font-weight: lighter;
    }

    .normal {
      font-weight: normal;
    }

    .bold {
      font-weight: bold;
    }

    .bolder {
      font-weight: bolder;
    }

Как изменить стиль шрифта текста

Стиль шрифта — это вариант шрифта текста. Этот вариант шрифта может быть normal, bold или italic.

Чтобы изменить стиль шрифта, вам нужно свойство font-style со значением normal, oblique или italic.

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

Как обычно, вы можете изменить стиль шрифта во встроенном, внутреннем или внешнем CSS.


<div>
      <h1>FrontendBook Normal</h1>
      <h1 style="font-style: oblique">FrontendBook Oblique</h1>
      <h1 style="font-style: italic">FrontendBook Italic</h1>
</div>



<style>
    .oblique {
      font-style: oblique;
    }

    .italic {
      font-style: italic;
    }
</style>



    .oblique {
      font-style: oblique;
    }

    .italic {
      font-style: italic;
    }

Как изменить семейство шрифтов текста

Семейство шрифтов представляет собой набор шрифтов с одинаковым дизайном и типографикой.

Чтобы изменить семейство шрифтов некоторого текста, вам нужно использовать font-family свойство CSS.

Затем вы можете сделать это с помощью встроенного CSS, внутреннего CSS или внешнего CSS.

Фрагмент кода ниже показывает, как изменить семейство шрифтов во встроенном CSS:

    
<h1 style="font-family: Verdana, Geneva, Tahoma, sans-serif">
      FrontendBook
</h1>

Во внешнем файле CSS вы можете изменить семейство шрифтов следующим образом:


h1 {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

Вы могли заметить, что в значении есть и другие семейства шрифтов — Geneva, Tahoma и sans-serif.

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

Если вам не нравятся шрифты, встроенные в ваше устройство, вы можете получить другие из Google Fonts.

Найдите свой любимый шрифт и скопируйте ссылку на него, а затем вставьте ссылку в <head> раздел вашего HTML, чтобы иметь доступ к нему в таблице стилей HTML.

Заключение

В этой статье вы узнаете, как изменить размер шрифта, толщину шрифта, стиль шрифта и семейство шрифтов текста во встроенном, внутреннем или внешнем CSS.

Вам может быть интересно, что лучше использовать: встроенный, внутренний или внешний CSS.

Если вы работаете над небольшим проектом, вы можете использовать внутренний или встроенный CSS, но если вы работаете над большим проектом или в команде, вам не следует использовать внутренний CSS.

Это потому, что рекомендуется держать ваш CSS отдельно от вашего HTML.

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

Также было высказано предположение, что встроенный CSS может негативно повлиять на SEO веб-сайта.