Как обозначается размер шрифта: как и какой лучше выбрать, список примеров

Размер шрифта CSS. Единицы измерения px, em, проценты — учебник CSS

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

/* в процентах: */
h2 {
	font-size: 100%;
}


/* в единицах измерения em: */
h3 {
	font-size: 1em;
}


/* в пикселях: */
h4 {
	font-size: 18px;
}


/* с помощью ключевого слова: */
p {
	font-size: small;
}

Размер шрифта в пикселях

Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px. Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:

font-size: 24px;

Размер шрифта в процентах

Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p, как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:

p {
	font-size: 100%;
}

/* ...то же самое, что и значение в браузере по умолчанию: */

p {
	font-size: 16px;
}

Если же в этом случае задать размер шрифта 50%, то он будет равен половине базового размера. Значение 200%, наоборот, увеличит шрифт в два раза.

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

Единица измерения em

По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60%, 3em = 300% и так далее. Пример записи:

font-size: 0.9em;

/* перед точкой можно опустить ноль: */

font-size: .9em;

Значения размеров шрифтов, указанные в em, наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em, то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза.

Наглядный пример можно увидеть на скриншоте:

Скриншот: наследование значений размеров шрифтов

В качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem, которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение div с 2em на 2rem, то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.

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

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

Ключевое слово	Размер в пикселях
xx-small	9px
x-small	10px
small	13px
medium	16px
large	19px
x-large	24px
xx-large	32px

Как видим, значение medium соответствует базовому размеру шрифта 16px. Использование ключевых слов ограничивает возможности и лишает гибкости, поэтому профессиональные разработчики не применяют их.

Завершение

В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймыin, сантиметрыcm, миллиметрыmm. Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.

Читайте далее: как установить жирный шрифт и курсив в CSS.

px, em, rem и другие

В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333...px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

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

Достоинства

• Главное достоинство пикселя – чёткость и понятность

Недостатки

• Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc, но они давно отправились на свалку истории.

Вот, если интересно, их значения:

• 1mm (мм) = 3.8px
• 1cm (см) = 38px
• 1pt (типографский пункт) = 4/3 px
• 1pc (типографская пика) = 16px

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

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в <div> одинаков.

А вот аналогичный пример с em вместо px:

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Выходит, размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р, g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа "x" и размер символа "0".

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

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

Проценты %, как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с %, он выглядит в точности так же, как с em:

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left

При установке свойства margin-left в %, процент берётся от ширины родительского блока, а вовсе не от его margin-left.

line-height

При установке свойства line-height в %, процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height.

width/height

Для width/height обычно процент от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Итак, мы рассмотрели:

• px – абсолютные, чёткие, понятные, не зависящие ни от чего.
• em – относительно размера шрифта.
• % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl++, но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px, ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и %.

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em.

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

Попробуем использовать этот подход для <li>.

Протестируем на таком списке:

<ul>
<li>Собака
  <ul>
  <li>бывает
    <ul>
    <li>кусачей
      <ul>
      <li>только
        <ul>
        <li>от жизни
          <ul>
          <li>собачей</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>

Пока это обычный вложенный список.

Теперь уменьшим размер шрифта до 0.8em, вот что получится:

<style>
  li {
    font-size: 0.8em;
  }
</style>
<ul>
<li>Собака
  <ul>
  <li>бывает
    <ul>
    <li>кусачей
      <ul>
      <li>только
        <ul>
        <li>от жизни
          <ul>
          <li>собачей</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>

Проблема очевидна. Хотели, как лучше, а получилось… Мелковато. Каждый вложенный <li> получил размер шрифта 0.8 от родителя, в итоге уменьшившись до нечитаемого состояния. Это не совсем то, чего мы бы здесь хотели.

Можно уменьшить размер шрифта только на одном «корневом элементе»… Или воспользоваться единицей rem, которая, можно сказать, специально придумана для таких случаев!

Единица rem задаёт размер относительно размера шрифта элемента <html>.

Как правило, браузеры ставят этому элементу некоторый «разумный» (reasonable) размер по умолчанию, который мы, конечно, можем переопределить и использовать rem для задания шрифтов внутри относительно него:

<style>
  html {
    font-size: 14px;
  }
  li {
    font-size: 0.8rem;
  }
</style>
<div><button>Кликните, чтобы увеличить размер шрифта</button></div>
<img src="https://js.cx/clipart/angry_dog. png">
<ul>
<li>Собака
  <ul>
  <li>бывает
    <ul>
    <li>кусачей
      <ul>
      <li>только
        <ul>
        <li>от жизни
          <ul>
          <li>собачей</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>
<script>
let html = document.documentElement;
up.onclick = function() {
  // при помощи JS увеличить размер шрифта html на 2px
  html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>

Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.

Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html>.

Единица rem не поддерживается в IE8-.

Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта CSS Values and Units 3:

• vw – 1% ширины окна
• vh – 1% высоты окна
• vmin – наименьшее из (vw, vh), в IE9 обозначается vm
• vmax – наибольшее из (vw, vh)

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

Их основное преимущество – в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.

Этот текст написан с размером `5vh`.

Вы сможете легко увидеть, как работает vh, если поменяете высоту окна браузера. Текст выше будет расти/уменьшаться.

Мы рассмотрели единицы измерения:

• px – абсолютные пиксели, к которым привязаны и потому не нужны mm, cm, pt и pc. Используется для максимально конкретного и точного задания размеров.
• em – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: "x"(ex) и "0"(ch), используется там, где нужно упростить масштабирование компоненты.
• rem – задаёт размер относительно шрифта <html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem, а JS меняет шрифт у <html>.
• % – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
• vw, vh, vmin, vmax – относительно размера экрана.

Размер шрифта: Что такое размер шрифта

Что такое размер шрифта?

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

Как размер шрифта влияет на удобочитаемость?

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

Какие размеры шрифтов обычно используются в веб-дизайне?

Некоторые распространенные размеры шрифта, используемые в веб-дизайне, включают 12px, 14px, 16px и 18px. Эти размеры считаются оптимальными для обеспечения читаемости на большинстве устройств и разрешений экрана.

Почему некоторые шрифты кажутся меньше других при одинаковом размере точек?

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

Как изменение размера шрифта влияет на доступность веб-сайта?

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

Каково практическое правило при выборе размера шрифта для различных типов контента?

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

Каковы рекомендации по использованию разных размеров шрифтов в адаптивном веб-дизайне?

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

Почему дизайнерам следует избегать использования слишком большого количества разных размеров шрифта на одной странице?

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

Как технологии повлияли на нашу способность настраивать размер шрифта на цифровых устройствах?

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

Какие факторы следует учитывать при принятии решения о том, какой шрифт и размер шрифта использовать в материалах для брендинга?

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

Как межстрочный интервал влияет на удобочитаемость наряду с размером шрифта?

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

Существуют ли какие-либо общие рекомендации о том, сколько места должно быть оставлено между строками в зависимости от размера шрифта?

Да! Общее правило предполагает оставлять между строками около 120-145% пространства в зависимости от выбранного размера шрифта. Однако это зависит от личных предпочтений. В конечном счете, вы хотите, чтобы ваши строки располагались на достаточном расстоянии друг от друга, чтобы они не сливались вместе, но не настолько, чтобы они выглядели как отдельные объекты

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

Дизайнеры могут выбирать размер шрифта меньше среднего при разработке веб-сайтов/приложений, поскольку меньшие шрифты занимают меньше места; это означает, что можно добавить больше элементов (например, изображений), не загромождая пространство без необходимости, плюс они могут хорошо подходить для минималистского дизайна!

Какие типичные ошибки допускают дизайнеры при выборе размера шрифта для веб-сайтов?

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

Как размер шрифта влияет на производительность веб-сайта?

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

Как мобильные устройства влияют на выбор размера шрифта?

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

Какая связь между длиной строки и размером шрифта при определении удобочитаемости?

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

Какие инструменты или ресурсы доступны дизайнерам для проверки размеров шрифта?

Для дизайнеров доступно несколько инструментов и ресурсов для проверки размеров шрифта, включая расширения браузера, такие как WhatFont и Fontface Ninja, которые позволяют пользователям идентифицировать определенные шрифты, используемые на веб-странице. Дизайнеры также могут использовать инструменты онлайн-тестирования, такие как Typecast или Adobe XD, которые предлагают предварительный просмотр в режиме реального времени того, как разные размеры шрифтов выглядят в дизайне.

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

При наличии буквально миллионов шрифтов поиск идеального может занять больше времени, чем следовало бы. Когда вы заметите хороший, вам нужно сразу же выяснить, что это такое; в противном случае вы можете потерять его навсегда. Если он особенно хорош, вы можете использовать его на своем собственном веб-сайте, например, шрифт Office, или в Windows, в зависимости от типа шрифта. Просто помните, что некоторые шрифты защищены авторским правом и недоступны для публичного использования.

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

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

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

1. Щелкните правой кнопкой мыши страницу, которая вам нравится, и выберите Inspect Element (Firefox), Inspect (Chrome) или F12 Инструменты разработчика (Edge).
   
2. Выберите Inspector (Firefox) или Computed (Chrome) в новых нижних окнах и прокрутите вниз справа, пока не дойдете до Font или font-size . Он должен показывать семейство шрифтов, конкретный используемый шрифт, его размер, цвет и все остальное, что определяет страница.
   

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

Сторонние инструменты для определения типа и размера шрифта

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

WhatFont

WhatFont доступен в виде веб-сайта или расширения для браузера. WhatFont бесплатен и очень прост. Вот что нужно сделать:

1. Найдите шрифт, который вы хотите исследовать. Сделайте скриншот образца ( CMD + Shift+ 4 на Mac или клавиша Windows + Shift + S на ПК). Затем перейдите на сайт WhatFont.
2. Нажмите, чтобы загрузить снимок экрана со своего компьютера, или перетащите снимок экрана и поместите его в поле.
   
3. Выберите образец шрифта. Затем щелкните значок с синей стрелкой .
   
4. Прокрутите список и найдите тот, который лучше всего соответствует нужному шрифту.
   

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

В зависимости от того, как настроена CMS или как спроектирована страница, это будет либо простая идентификация шрифта, либо полное поле с указанием размера, цвета, толщины и т. д.

Fontanello

Не путать с футболистом. Fontanello — отличное бесплатное расширение для браузера, позволяющее быстро и легко просматривать шрифт сайта. Хотя в настоящее время оно доступно только для Chrome и Firefox, это расширение стоит скачать. Вот как использовать Fontanello:

1. Откройте Chrome и перейдите на страницу Fonatanello в Интернет-магазине Chrome.
2. Нажмите Добавить в Chrome , чтобы установить расширение браузера Fontanello .
   
   
3. Откройте веб-страницу со шрифтом, который вы хотите проверить. Выделите образец текста, который вам нравится.
   
   
4. Щелкните правой кнопкой мыши выделенный текст и выберите Fontanello .