Css-свойства для шрифтов

Свойство font-weight

Свойство указывает вес или жирность шрифта.

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

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

Давайте посмотрим на примере:

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

Conclusion

Using an HTML web font will make your site look consistent throughout different devices. Additionally, it will help create a professional, formal, or elegant look for the website, depending on the font used.

In this article, we’ve provided the 20 best web-safe fonts to help with your decision. Let’s recap some of the choices:

• Arial – a classical font that can be used in all types of websites.
• Times New Roman – an excellent option for news and educational websites.
• Cambria – a versatile option that comes in regular, bold, italic, and italic bold variations.
• Monaco – if you have a website about coding or gaming, it is a great font for decorative texts.

Keep in mind that each font has a unique flair, so make sure to choose one that is both legible and representative of your brand.

Самые популярные шрифты для веб-страниц

Arial

Считается стандартным в большинстве случаев. Самый распространенный из шрифтов «sans serif» или рубленых шрифтов (у которых нет засечек на кончиках букв). Его часто используют в Windows для замены других литер.

Helvetica

Helvetica — палочка-выручалочка для дизайнеров. Этот стандартный веб шрифт работает практически всегда (по крайней мере, в качестве подстраховки для других шрифтов).

Times New Roman

Выполняет ту же роль для шрифтов с засечками, что и Arial для тех, что без засечек. Он является одним из самых популярных на Windows-устройствах. Это обновленная версия старого шрифта Times.

Times

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

Courier New

Похож на Times New Roman и применяется в качестве разновидности старой классики. Он также считается моноширинным шрифтом. В отличие от шрифтов с засечками и без, все его знаки имеют одинаковую ширину.

Courier

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

Verdana

Verdana может по праву считаться истинным веб-шрифтом (true web font) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.

Georgia

Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana. Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman, по сравнению с ним выглядит словно карлик.

Palatino

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

Garamond

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

Bookman

Bookman (или Bookman Old Style) — один из лучших стандартных шрифтов для заголовков. Его характерная черта — удобочитаемость даже при использовании маленького размера.

Comic Sans MS — забавная альтернатива для шрифтов с засечками.

Trebuchet MS

Это шрифт средневековой тематики, изначально разработанный корпорацией Microsoft в середине девяностых годов. Он применялся в Windows XP. Сегодня с его помощью составляют основной текст.

Arial Black

Аналог стандартного шрифта для сайта Arial. Правда, он больше, толще и жестче. Своими пропорциями он похож на шрифт Helvetica

А это важно. Им можно успешно заменить Helvetica без необходимости покупать лицензию

Impact

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

How to Add HTML Fonts in WordPress?

There are a couple of ways you can add HTML fonts in WordPress. In this section, we’ll go over two popular methods:

Add HTML Fonts Manually

Adding fonts manually is a great option if you want to avoid plugins or wish to add a custom font to your WordPress site.

First, select and download a custom font from a web font provider such as Adobe Fonts, TypeNetwork, or Fonts.

Once you’ve made a choice, convert the font into a web-friendly format. You can use the Webfont Generator to achieve this.

After you’ve downloaded the file, upload it to the wp-content/themes/your-theme/fonts directory.

Adding fonts manually using HTML can be a challenge since the HTML <font> tag is a deprecated font tag in HTML5. Instead, people now use CSS properties to change font-family properties, color, face, and other font attributes.

A popular method to further style your font is using inline CSS. It adds styles to a single HTML element with a CSS style attribute.

Here is an example of what inline CSS may look like as an HTML element:

<h1 style=”color:red;”>Inline CSS in Red</h1>
<p style=”font-family:Calibri; color:yellow;”>This is a paragraph in yellow text color.</p>

Manually adding HTML can be confusing and overwhelming for beginners. Therefore, learning the basics of CSS and HTML can be helpful.

Add HTML Fonts Using Plugins

There are plenty of plugins available to add HTML fonts to your WordPress website. However, we’ve narrowed it down to the two most popular options.

Easy Google Fonts will automatically pull fonts from the Google Fonts directory. This plugin also works with any WordPress theme.

Start by installing and activating the plugin. After that, navigate to Appearance -> Customize on your WordPress admin dashboard.

From there, select Typography -> Default typography, and you’ll be presented with text elements such as headings and paragraphs.

Select the element you want to style. Navigate to the Font family tab and click on the dropdown menu to choose a font.

Once you’ve selected the font, you can continue styling the weight and style, font size, and color attribute while seeing real-time changes.

After you’re satisfied with the result, click Publish.

With this plugin, upload any custom font, and UAF will automatically convert it into a web-safe font.

Once you’ve installed the plugin, the Use Any Font tab will appear on your WordPress admin bar. Click on it and activate your API key.

After the verification is complete, add your .ttf, .otf, and .woff font files and click upload to let UAF convert the custom fonts into web-safe fonts.

Additionally, UAF is also compatible with Flatsome for live font customization on Flatsome Themes.

Свойство font-size

Свойство используется для установки размера шрифта для текстового содержимого элемента.

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

Установка font-size в пикселях (px)

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

Посмотрим следующий пример, чтобы понять, как это в основном работает:

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

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

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

Установка font-size в единицах em

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

Итак, если вы установите для элемента , то и .

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

Давайте посмотрим на следующий пример, чтобы понять, как это работает:

Использование комбинации % и em

Чтобы упростить вычисление значений , есть лайфхак, который состоит в том, чтобы установить для элемента равным (чтобы единицы рассчитывались не от , а от ).

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

Установка font-size в единицах rem

Для большей отзывчивости, в CSS3 введены единицы измерения rem (сокращенно от root em), которые всегда зависят от размера шрифта корневого элемента (), независимо от того, где находится элемент в документе (в отличие от , который расчитывается относительно размера шрифта родительского элемента).

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

Установка font-size с помощью ключевых слов

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

Размер шрифта можно указать с помощью одного из следующих ключевых слов: , , , , , , . Кроме этих, есть еще ключи со значением относительного размера шрифта: or . Посмотрим, как это работает:

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

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

Установка font-size в единицах vw и vh

Размеры шрифта могут быть указаны с использованием относительных единиц : или .

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

Посмотрим следующий пример:

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

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

Для создания более гибкой типографики вы можете использовать медиазапросы CSS.

Шрифты для сайта — что может быть не так?

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

Такого не случится, если реализовать резервный вариант.

Насколько важно применение безопасных веб-шрифтов?

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

А сайты? Например, этот? Шрифт, который видите вы, может быть вовсе не тем, который изначально прописан для сайта.

Что это значит? Допустим, что дизайнер выбрал для сайта какое-то семейство платных шрифтов. Если у вас они не установлены и не предоставляется специальным веб-сервисом, то шрифт, который вы видите, — один из стандартных вариантов. Например, Times New Roman.

Поэтому как на вашем экране текст может выглядеть просто ужасно.

А вот стандартные шрифты для сайта есть во всех операционных системах. Это небольшая коллекция, доступная в Windows, Mac, , а также Unix и Linux.

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

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

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

What Are the Categories of HTML Fonts?

In typography, each font is a member of one of five font families, categorized according to their design similarities. They are:

Cursive

Cursive fonts imitate handwriting, usually having the letters joined together in a looped, flowing manner.

Many people associate this font type with individuality, expression, and calligraphy. It’s best to use this font type for headers, taglines, and blog post titles on your website, rather than the body text. When used as a default font, cursive can be hard to read.

Fantasy

The Fantasy font family generally features decorative attributes present on each letter. Popular among works of fiction, typefaces from this font set can help instantly communicate their genre and immerse the audience.

For example, this font category is widely used in fantasy and sci-fi movies such as Star Wars, Harry Potter, and Frozen.

Serif

The most prominent style attribute of serif fonts is the presence of small, additional strokes by the edges of the letters. While initially used for ink printing purposes, the style is now associated with a sense of formality and elegance.

Websites mainly use Serif for body text, as it is highly legible and helps readers quickly skim written content.

Popular Serif fonts include Times New Roman, Cambria, and Garamond.

Sans-serif

As a counterpart to the serif font category, Sans-serif fonts do not display additional strokes attached to their letters.

Most fonts from this family feature similar widths, appearing both modern and minimalistic.

Sans-serif fonts are legible in any size, making the typefaces a great choice for both print content and digital use.

Monospace

Each letter and symbol found in Monospace fonts are of the same width.

Since the fonts are consistent and easy to distinguish, they are often the default font for typewriters and computer terminals.

Основные свойства шрифтов в CSS

В CSS при описании шрифта используют следующие характеристики:

Стиль

Стиль шрифта определяет тип начертания для представления текста: наклонный, курсивный или обычный.

Атрибут font style может принимать такие значения как:

• normal (обычный);
• italic (курсив);
• oblique (наклонный).

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

Вариант шрифта

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

Свойство font variant может иметь одно из двух возможных значений:

• normal (обыкновенный шрифт);
• small-caps (шрифт с малыми прописными буквами).

Вес шрифта

В CSS жирный шрифт или наоборот, более светлый, задаётся параметром font weight. Некоторыми браузерами поддерживаются числовые значения в описании веса.

Каждый шрифт может принимать следующие значения:

• normal (обычный);
• lighter (светлее);
• bold (жирный);
• bolder (ещё более жирный);
• 100-900 (числовое описание веса, в котором значение 100 соответствует самому тонкому начертанию, а 900 — самому толстому начертанию).

Например:

p {font-family: georgia, garamond serif;}
td {font-family: georgia, garamond serif; font-weight: bold;}

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

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

Например, задание шрифта размером 20 пикселей выглядит таким образом:

p {font-size: 20px;}

Также, размер шрифта можно задать с помощью процентов от его базового размера.

Например, шрифт с параметрами:

p {font-size: 150%}

будет отображён на 50% больше стандартного размера. В том случае, если гарнитура и размер шрифта не указаны, браузером будет выводиться базовый шрифт Times New Roman со стандартным, на усмотрение браузера, размером.

Цвет шрифта

Возможности CSS позволяют задать цвет текста и его фона с помощью следующих свойств:

• color (цвет текста);
• background color (цвет фона текста).

Цветовые значения рекомендуется указывать в общепринятом шестнадцатеричном виде цветовой модели RGB.

Например, белый текст на чёрном фоне будет иметь такие значения:

• color: #ffffff;
• background-color: #000000.

Первая пара цифр отвечает за уровень красного цвета, вторая — за уровень зелёного цвета, а третья — за уровень синего.

Минимальное значение — 0, а максимальное — f. Этот принцип позволяет самостоятельно «придумать» значения некоторых цветов: например, если первой паре цифр присвоить максимальное значение, а второй и третьей — минимальные, получится насыщенный красный цвет #ff0000.

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

Однако, для того, чтобы не изобретать велосипед, можно воспользоваться специальными программами или онлайн-сервисами для подбора цветового шестнадцатеричного кода: например, если в поисковом сервисе Яндекс ввести слово «цвет», появится удобное для таких целей средство.

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

Надеемся, что данное руководство было для вас полезно. Желаем успехов!

АМАнтон Малаховавтор

Why Should You Use an HTML Web Font?

Using an HTML web font is crucial for your web design. It ensures the text on your website is consistent throughout all devices.

Without an HTML web font, you risk losing visitors since your fonts can render as unreadable symbols when accessed from unsupported devices.

Here are some reasons as to why you should use an HTML font for your website:

• Consistent design. An HTML web font makes sure your chosen font is rendered properly throughout any browser and device.
• Fallback font. If your preferred font doesn’t load correctly on a person’s browser, HTML web fonts will fall back to a default font found on the person’s device.
• No download. You can easily embed HTML fonts from a web-safe font provider like Google Fonts to your HTML document.

Свойство font-weight — насыщенность, или жирность шрифта

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

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

В том случае, если вложенным элементам нужно вернуть нормальное начертание, нужно использовать значение или , или указать вес шрифта как 400.

Итак, доступные значения свойства :

font-weight
Значения:
	Значение по умолчанию. Соответствует нормальной насыщенности шрифта. Эквивалентно значению насыщенности, равной 400.
	Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
	Насыщенность шрифта больше, чем у родительского элемента.
	Насыщенность шрифта меньше, чем у родительского элемента.
	Соответствие значений насыщенности файла шрифта: от самого тонкого (значение 100) до самого жирного (значение 900). В зависимости от наличия в ОС файлов шрифта значения от 100 до 400 могут соответствовать нормальной насыщенности шрифта; 500 и 600 — средней насыщенности, а от 700 до 900 — очень высокой насыщенности шрифта.
	Устанавливает значение свойства в значение по умолчанию (normal).
	Наследует значение свойства от родительского элемента.

Примеры использования значений в CSS:

Жирность шрифта. Свойство font-weight

CSS

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 300;
font-weight: 400;
font-weight: 600;
font-weight: 800;
font-weight: inherit;
font-weight: initial;

1 2 3 4 5 6 7 8 9 10

font-weightnormal; font-weightbold; font-weightlighter; font-weightbolder; font-weight300; font-weight400; font-weight600; font-weight800; font-weightinherit; font-weightinitial;

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

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

В таблице ниже приведены значения шрифта от 100 до 900, их названия согласно документации на MDN (. | .) и их внешний вид для шрифта Montserrat, который используется в примерах для этой статьи. Здесь четко видно, как тонкий шрифт со значением 100 постепенно «утолщается» для каждого следующего значения.

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

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

Учтите, что для некоторых шрифтов существует всего один файл (чаще всего это рукописные или фантазийные шрифты), для других — 2-4 файла шрифта (обычно Regular, Italic, Bold и Bold Italic), и только небольшая часть имеет все 9 вариантов насыщенности + еще 9 для курсивного начертания.

Значение	Название файла шрифта	Отображение шрифта Montserat
100	Thin (Hairline)/ Тонкий (Волосяной)
200	Extra Light (Ultra Light)/ Дополнительный светлый (Сверхсветлый)
300	Light/ Светлый
400	Normal (Regular)/ Средний
500	Medium/ Нормальный
600	Semi Bold (Demi Bold)/ Полужирный
700	Bold/ Жирный
800	Extra Bold (Ultra Bold)/ Дополнительный жирный (Сверхжирный)
900	Black (Heavy)/  Чёрный (Густой)