Поиск по сайту:

Как изменить размер шрифта HTML в CSS


Вы не добьетесь успеха как веб-разработчик, если не знаете, как изменять размеры шрифтов в CSS. К счастью, это руководство вас охватило.

Умение стилизовать различные аспекты вашей HTML-страницы — важный навык для веб-дизайнеров и разработчиков. Чтобы оформить веб-страницы HTML с использованием цветов и размеров шрифтов, вам необходимо знать CSS. Чтобы настроить размер шрифта конкретно, вы можете использовать свойство CSS font-size .

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

Понимание свойства CSS-размера шрифта

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

Обычно рекомендуется ориентироваться на определенные элементы, поскольку обычно не требуется, чтобы все имело одинаковый размер. Текст, который не соответствует визуальной иерархии, трудно просмотреть и отличить заголовки более высокого уровня от заголовков низкого уровня.

Проще говоря, не злоупотребляйте свойством font-size. Если вы хотите, чтобы заголовок выделялся, для этого существуют различные HTML-теги заголовков. Ознакомьтесь с нашей шпаргалкой по основам HTML, где вы найдете различные теги, атрибуты и многое другое, а также пояснения.

Свойство CSS font-size принимает два типа значений: абсолютные и относительные.

Абсолютные значения длины (например, px) являются фиксированными, а относительные (например, em и ex) являются гибкими. Например, для единицы измерения шрифта, такой как em, размер обычно определяется размером шрифта родительского элемента. Однако на корневые единицы измерения шрифта, такие как rem, влияет размер шрифта корневого элемента ().

У каждого есть свои плюсы и минусы, но, чтобы сосредоточиться, мы не будем обсуждать их в этой статье.

Как изменить размер шрифта HTML-элемента в CSS

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

Сначала укажите селектор (текст, который вы хотите изменить) и откройте фигурные скобки. Затем введите свойство font-size, за которым следует двоеточие, укажите конкретный размер, в котором вы хотите представить свой HTML-текст, и закройте его точкой с запятой.

Вот синтаксис:

CSS selector {
  font-size: value;
}

Чтобы лучше понять эту концепцию, просмотрите следующий шаблон HTML, в котором есть несколько дополнительных строк кода (заголовок и абзац):

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Simple HTML Page</title>
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <h1>This is my first heading</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Если вы хотите изменить размер шрифта элемента абзаца, вам необходимо выбрать его (с помощью класса, тега или идентификатора) и, используя свойство CSS font-size, установить пользовательское значение с помощью предпочитаемые вами единицы измерения. В нашем примере мы будем использовать пиксели (px).

p {
  font-size: 18px;
}

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simple HTML Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <h1>This is my first heading</h1>
      <p style="font-size:18px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </body>
</html>

Текст в HTML-теге p теперь будет иметь новый нестандартный размер.

Устранение ошибок при изменении размера шрифта HTML в CSS

Хотя весь процесс изменения размера текста в CSS может показаться простым, он не всегда может оказаться таким, как вы ожидаете. Если у вас возникли проблемы, начните с проверки, сохранили ли вы изменения в файле (также убедитесь, что вы связали лист CSS с файлом HTML). Если да, попробуйте использовать встроенный метод, а затем обновите страницу.

Если это работает, возможно, проблема в вашем CSS-коде. Попробуйте использовать тег !important . Если он работает, значит, в нем есть конфликтующий код. Разберите код CSS построчно, чтобы попытаться обнаружить эту ошибку.

Статьи по данной тематике: