Font size css: font-size — CSS: Cascading Style Sheets

Мы можем представить размер шрифта, используя положительное процентное значение, которое принимает размер шрифта родительского элемента в качестве ссылки.

Примеры

Пример 1

 
 

<голова>
  <стиль>
    .пример {
      размер шрифта: 200%;
    }
  

<тело>
   
Это заголовок
 
  
 Это пример установки размера шрифта текста в процентах.
  
Это абзац с размером шрифта по умолчанию.


 

Вывод

В приведенном выше примере мы указали размер шрифта элемента абзаца равным 200%. Единица измерения в процентах относится к размеру шрифта браузера по умолчанию. На изображении ниже показано, как текст отображается на экране:

Пример 2

 
 

<голова>
  <стиль>
    .длина {
      красный цвет;
      размер шрифта: 1 см;
    }
  

<тело>
   
свойство размера шрифта
 
  
Абзац длиной 1 см. 


 

Вывод

В приведенном выше примере мы указали размер шрифта элемента абзаца равным 1 см. На изображении ниже показано, как текст отображается на экране:

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

Ключевые слова

Мы можем использовать два типа ключевых слов для установки размера шрифта текста в CSS — Абсолютные и относительные ключевые слова .

1. Абсолютные ключевые слова

Абсолютные ключевые слова задают размер шрифта текста, который не зависит от изменения размера шрифта других элементов на веб-странице. Это зависит от размера шрифта по умолчанию на веб-странице. Ниже приведен список абсолютных ключевых слов, используемых для установки размера шрифта текста с их значениями.

• xx-маленький (9 пикселей)
• х-маленький (10 пикселей)
• маленький (13 пикселей)
• средний (16 пикселей)
• большой (18 пикселей)
• x-большой (24px)
• xx-большой (32px) Для приведенного выше набора значений мы взяли размер шрифта по умолчанию для текущего браузера равным 16px. Среднее ключевое слово имеет тот же размер шрифта.

Пример

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: xx-крупный;
    }
    h3 {
      размер шрифта: x-большой;
    }
    h4 {
      размер шрифта: крупный;
    }
   

<тело>
   
Это заголовок
 
   
Это подзаголовок.
 
  
Это текст абзаца.
   
Это заголовок нижнего уровня.
 
  
Это еще один абзац текста.
  


 

Вывод

В приведенном выше примере мы установили размер шрифта всех элементов

на xx-large, что эквивалентно

— x-large, что эквивалентно

к большим элементам, что эквивалентно

принимает размер шрифта по умолчанию, эквивалентный 16px . Здесь мы указали размеры, используя ключевые слова, установленные браузером, а не пиксели. На изображении ниже показано, как текст отображается на экране:

2.

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

Пример

 
 

<голова>
<стиль>
  h2 {размер шрифта: больше;}
  h3 {размер шрифта: средний; }
  h4 {размер шрифта: меньше; }


<тело>
   
Это заголовок
 
   
Это подзаголовок.
 
   
Это заголовок нижнего уровня.
 
  
 Это текст абзаца.

  
Это еще один абзац текста.


 

Выход

В приведенном выше примере мы установили размер шрифта для всех элементов

на средний, что эквивалентно

— больше, а для элементов

—

принимает размер шрифта по умолчанию, эквивалентный 16px . Здесь мы указали размеры, используя относительные ключевые слова. Ключевое слово «больше» делает текст больше, чем размер браузера по умолчанию. Ключевое слово меньше делает текст меньше, чем размер браузера по умолчанию. На изображении ниже показано, как текст отображается на экране:

пикселей

Использование пикселей для изменения размера текста — это наиболее распространенный способ, который мы все использовали как разработчики. Пиксели — это абсолютные единицы измерения, которые помогают нам быть более точными. Веб-браузеры и операционные системы не влияют на единицы пикселей, поскольку они отображаются одинаково на всех экранах и во всех браузерах. При всех преимуществах пиксельные единицы имеют один недостаток — доступность. Мы не можем настроить размер шрифта текста, который определяется с помощью пикселей в некоторых браузерах, что делает его недоступным и сложным для использования пользователями с нарушениями зрения.

Пример

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: 40px;
      цвет синий;
    }
    h3 {
      размер шрифта: 30px;
      цвет: небесно-голубой;
    }
    п {
      размер шрифта: 18px;
      цвет: фуксия;
    }
  

<тело>
   
Это СКАЛЕР
 
   
Это ТЕМЫ SCALER 2
 
  
Что такое CSS?
  
Объясните свойство размера шрифта в CSS.


 

Вывод

В приведенном выше примере мы установили размер шрифта всех элементов

на

на

на 18px . На изображении ниже показано, как текст выглядит на экране:

ems

ems единиц — это еще один способ установки размера шрифта в CSS. Это относительные единицы измерения, в которых в качестве эталона используется размер шрифта родительского элемента. Разработчики используют em единиц вместо пикселей, так как это позволяет изменять размер текста в соответствии с изменяющимся размером родительского элемента.

Давайте разберемся на примере. У нас есть абзац текста, написанный внутри контейнера. В контейнере указан размер шрифта 15px . Если пользователь устанавливает размер шрифта текста внутри контейнера равным 1em , это означает, что размер шрифта абзаца текста будет таким же, т. е. 20px . Таким образом, он примет размер шрифта своего родительского элемента. Если указанный размер шрифта текста равен 2em, то размер шрифта его родительского элемента будет в два раза больше.

Размер шрифта по умолчанию в большинстве браузеров равен 16px . Если мы не указываем размер шрифта для текста или его родительский элемент не имеет определенного размера шрифта, он принимает размер шрифта по умолчанию для этого браузера, который обычно составляет 16px . Таким образом, по умолчанию 1em соответствует размеру шрифта 16px , а 2em — размеру шрифта 32px .

Давайте разберемся с этим на примере, взяв размер шрифта веб-страницы равным 9. 0005 16px . Таким образом, чтобы вычислить размер шрифта текста в em , мы должны разделить на 16px . Таким образом, если мы хотим, чтобы наш заголовок имел размер 24px , он равен 1,5 em (24px/16px = 1,5 em) .

Пример

 
 

<голова>
  <стиль> 
    ч2 {
      размер шрифта: 2.5em;
      /* 40px/16=2.5em */
      цвет синий;
    }
    h3 {
      размер шрифта: 1.875em;
      /* 30px/16=1.875em */
      цвет: небесно-голубой;
    }
    п {
      размер шрифта: 1em;
      /* 16px/16=1em */
      цвет: фуксия;
    }
  

<тело>
   
Это СКАЛЕР
 
   
Это ТЕМЫ SCALER 2
 
  
В этой статье мы собираемся изучить размер шрифта в CSS.
  
Указание размера шрифта в em позволяет всем основным браузерам изменять размер текста.
    К сожалению, проблема со старыми версиями IE все еще существует. При изменении размера текста он становится больше/меньше, чем должен.


 

Вывод

В приведенном выше примере мы установили размер шрифта всех элементов

равным

2. 5em

равны

в 1.125em , что эквивалентно 18px . На изображении ниже показано, как текст отображается на экране:

rem

Единица измерения rem обозначает корень em , новое свойство CSS3 , используемое для установки размера шрифта текста. Это относительная единица измерения, ссылка на которую берется из корневого элемента, а не из его родительского элемента. Значения rem широко используются на веб-странице, поскольку они определяют размер шрифта, на который не влияет размер его родительского элемента. Вместо этого он принимает значение размера шрифта относительно всего документа. Давайте лучше разберемся с помощью примера. Если размер шрифта по умолчанию на нашей веб-странице равен

отображались с размером

2. 5rem

Пример

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: 2.5rem;
      /* 40px/16=2.5rem */
      цвет синий;
    }
    h3 {
      размер шрифта: 1.875rem;
      /* 30px/16=1,875 бэр */
      цвет: небесно-голубой;
    }
    п {
      размер шрифта: 1rem;
      /* 16px/16=1rem */
      цвет: фуксия;
    }
  

<тело>
   
Это СКАЛЕР
 
   
Это ТЕМЫ SCALER
 
  
В этой статье мы собираемся изучить размер шрифта в CSS.
  
В этом примере показано использование rem единиц измерения размера шрифта в CSS.
 


 

Вывод

В приведенном выше примере мы установили размер шрифта всех элементов

равным

равны

в 1rem , что эквивалентно 16px . На изображении ниже показано, как текст отображается на экране:

Ex

Единица измерения ex также является динамической единицей для установки размера шрифта элемента. Он использует x-height текущего размера шрифта в CSS в качестве ссылки. Значение умножается на указанный размер шрифта, что соответственно увеличивает размер шрифта.

Пример

 
 

<голова>
  <стиль>
    .div1 {
      размер шрифта: 30px;
      граница: 1px сплошной черный;
    }
    .div2 {
      размер шрифта: 40px;
      граница: 1px сплошной черный;
    }
    охватывать {
      размер шрифта: 1ex;
    }
  

<тело>
  
Размер шрифта элемента div установлен на 30 пикселей. Элемент span внутри элемента div имеет размер шрифта 1ex.
  
Размер шрифта элемента div установлен на 30 пикселей. Элемент span внутри элемента div имеет размер шрифта 1ex.


 

Вывод

В приведенном выше примере мы установили размер шрифта всего текста внутри div1 как 30px и внутри div2 как 40px. Текст внутри элемента span имеет размер шрифта 1ex. Но видно, что они оба имеют разные размеры. Это связано с тем, что единица измерения ex относится к унаследованному шрифту текущего элемента. На изображении ниже показано, как текст отображается на экране:

Единицы области просмотра (vw)

Единицы области просмотра — это единицы измерения, в которых в качестве эталона используется процент от размера области просмотра браузера.

Единицы области просмотра представляют собой процент от размера области просмотра браузера. Таким образом, 1% высоты области просмотра равен 1vh. Если окно просмотра имеет высоту 2000 пикселей, то 1vh равно 20 пикселям.

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

Давайте лучше разберемся на примере.

Пример 1

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: 20vw;
    }
  

<тело>
   
Здравствуйте
 
  
Измените размер окна браузера, чтобы увидеть, как изменится размер шрифта h2. 
  
1vw = 1 % ширины области просмотра.
  
Единица vw не поддерживается в IE8 и более ранних версиях.


 

Вывод

В приведенном выше примере мы установили размер шрифта всего текста внутри элемента

равным 20vw. Текст внутри элемента

имеет размер шрифта по умолчанию. Здесь размер шрифта 20vw меняется в зависимости от размера браузера. Размер шрифта 20vw равен 20% ширины браузера. Вы можете изменить высоту браузера, чтобы увидеть изменения размера заголовка. На изображении ниже показано, как текст отображается на экране:

Пример 2

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: 20vh;
    }
  

<тело>
   
Здравствуйте
 
  
Измените размер окна браузера, чтобы увидеть, как изменится размер шрифта h2.
  
1vh = 1% высоты области просмотра.
  
Единица vh не поддерживается в IE8 и более ранних версиях.


 

Вывод

В приведенном выше примере мы установили размер шрифта всего текста внутри элемента

равным 20vh.

имеет размер шрифта по умолчанию. Здесь размер шрифта 20vh меняется в зависимости от размера браузера. Размер шрифта 20vh равен 20% высоты браузера. Вы можете изменить высоту браузера, чтобы увидеть изменения размера заголовка. На изображении ниже показано, как текст отображается на экране:

Поддержка браузера

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

Вывод Размер шрифта в CSS это свойство, используемое для изменения размера различных элементов в HTML.

Вы также можете обратиться к похожим статьям по связанным темам, например:

• Кнопка CSS
• Переменные CSS
• CSS границы
• Поле CSS
• Анимации CSS

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

❮ Пред. Следующий ❯

Свойство font-size определяет размер шрифта текста.

Размер шрифта можно определить следующими способами:

• абсолютный размер
• относительный размер
• длина
• процент

• хх-маленький
• х-маленький
• маленький
• маленький
• х-большой
• xx-большой

Относительный размер шрифта включает следующие значения:

• меньше
• больше

Длины могут быть относительными (em, ex, px) и абсолютными (in, cm, mm, pt, pc). Проценты задают абсолютный размер шрифта относительно размера шрифта родительского элемента.

 размер шрифта: средний | хх-маленький | х-маленький | маленький | большой | х-большой | х-большой | меньше | больше | длина | начальная | наследовать; 

Пример свойства font-size:

 

  <голова>
    
    <стиль>
      ч2 {
        размер шрифта: 24pt;
      }
      h4 {
        размер шрифта: 26px;
      }
      п {
        размер шрифта: 1em;
      }
      а {
        размер шрифта: 100%;
      }
      охватывать {
        размер шрифта: x-маленький;
      }
    
  
  <тело>
    Этот диапазон записывается со значением x-small.
    
Этот абзац написан шрифтом размером 1em.
    Эта гиперссылка написана со 100% размером шрифта.
     
Для этого заголовка мы использовали размер шрифта x-small.
 
     
Для этого заголовка мы установили размер шрифта 24pt.
  
  
 

Попробуй сам »

Результат

Значения в процентах относятся к размеру шрифта родительского элемента. Код ниже показывает его использование:

Пример свойства font-size, указанного в процентах:

 

  <голова>
    
    <стиль>
      h4 {
        размер шрифта: 125%;
      }
    
  
  <тело>
     
Для этого заголовка мы использовали размер шрифта x-small.
 
    Этот диапазон записывается со значением x-small.
    
Этот абзац написан шрифтом размером 1em.
  
 

Единица em считается относительной единицей. Он основан на вычисленном значении размера шрифта родительского элемента. В приведенном ниже коде размер абзаца будет 32 пикселя, потому что 2×16=32, а размер шрифта заголовка будет 48 пикселов, потому что 3×16=48 пикселов. Этот метод очень полезен, потому что мы можем быть уверены, что все дочерние элементы всегда будут относиться друг к другу.

Пример свойства font-size со значением «em»:

 

  <голова>
    
    <стиль>
      .контейнер {
        размер шрифта: 16px;
      }
      п {
        размер шрифта: 2em;
      }
      h3 {
        размер шрифта: 3em;
      }
    
  
  <тело>
    <дел>
       
Вот заголовок
 
      
Вот текст.