Шрифты HTML — свойства и способы изменения

Что это такое? Шрифты в HTML-документе – то, что меняют во время верстки. Изменению подвергают размер, цвет и гарнитуру. Также можно выбрать готовый шрифт, в каждой ОС свой список доступных вариантов.

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

В статье рассказывается:

Что может делать HTML со шрифтами

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

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

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

Шрифт в любом HTML-документе обладает тремя свойствами: размером (кеглем), гарнитурой, цветом. Роль шрифтов и типографики в вёрстке веб-страниц весьма велика: именно шрифт определяет, насколько читабельным будет контент страницы. Операционная система устройства, на котором просматривают HTML-страницу, и браузер очень сильно влияют на отображение шрифтов.

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

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

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

На сегодняшний день этот подход безнадёжно устарел и считается плохой практикой, поскольку, согласно веб-стандартам, HTML-разметка не должна содержать ничего, что касается оформления, а лишь структуру и контент. Кроме того, полноценная поддержка тега font осталась только в HTML3 – довольно старой версии языка гипертекстовой разметки.

Источник

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

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

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

Размер шрифта на странице можно определить при помощи тега font HTML. В статье Цвет шрифта HTML мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size, который и позволяет установить размер шрифта. Применяется он следующим образом:

Конструктор сайтов "Нубекс"

Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.

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

Устанавливаем размер шрифта при помощи CSS

В CSS для изменения размера шрифта применяется свойство font-size, которое применяется следующим образом:

   .nubex 
Шрифты HTML-блока div класса nubex получают размер 14px при помощи свойства font size.
  

В приведенном примере размер шрифта устанавливается в пикселях. Но существуют и другие способы задания размера:

• large, small, medium — задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
• larger, smaller — задают относительный размер (меньше или больше относительно родительского элемента).
• 100% — задается относительный размер (в процентах относительно родительского). Например:

• 5ex — означает, что размер составит 5 высот буквы x от базового шрифта;
• 14pt — 14 пунктов;
• 22px — 22 пикселя;
• 1vw — 1% от ширины окна браузера;
• 1vh — 1% от высоты окна браузера;

Смотрите также:

Источник

HTML Font Size – How to Change Text Size with an HTML Tag

Joel Olawanle

When you add text to your HTML file with an HTML tag, you won’t always want the text to remain the default size. You’ll want to be able to adjust how the text displays in the browser.

In this article, you will learn how to change the text size with an HTML tag.

Before you proceed, it is essential to know that there is only one way we can do this: through CSS’s font-size property. We can use the font-size property through inline, internal, or external styling.

In the past, we could adjust text size within our HTML tag without using CSS. But that was before HTML5. Then we added text using the tag, which can take in an attribute of size as seen below:

This size attribute can take in value from 1-7 in which the text size increases from 1 to 7. But like I said, this has long been depreciated, and most people don’t even know it existed.

In case you are in a rush to see how you can change the size of your text, then here it is:

// Using inline CSS 
Hello World!
 // Using internal/external CSS selector

Suppose you are not in a rush. Let’s briefly dive right in.

How to Change Text Size With Inline CSS

Inline CSS allows you to apply styles to specific HTML elements. This means we are putting CSS into an HTML tag directly. We use the style attribute, which now holds all our styling.

We use the font-size property alongside our value to change the text size using inline CSS. This value can use any of your preferred CSS units such as em, px, rem, and so on.

 
Hello World!
 
Any text whose font we want to change
 

A perfect syntax would be:

How to Change Text Size With Internal or External CSS

The approach you use to change text size in internal and external CSS styling is similar, since you use a selector. The general syntax for this is:

The selector can either be our HTML tag or maybe a class or an ID. For example:

// HTML 
Any text whose font we want to change
 // CSS p

// HTML 
Any text whose font we want to change
 // CSS .my-paragraph

Wrapping Up

In this article, you learned how to change the font/text size of an HTML element using CSS. You also saw how developers did it before the introduction of HTML5.

Also, keep in mind that it’s always better to style your HTML elements using internal or external styling, as it offers a lot of flexibility compared to inline styling.

For example, you can make use of one CSS class for all your p tags rather than having to add inline styles to all your p tag elements.

Using inline styles is not considered best practice because it results in a lot of repetition – you cannot reuse the styles elsewhere. To learn more, you can read my article on Inline Style in HTML.

I hope this tutorial gives you the knowledge to change the size of your HTML text so you can make it look better.

Источник