Dopestyle

Объявление насыщенности в CSS

В CSS предусмотрены различные значения насыщенности, которые можно применять к шрифтам (конечно же, если они представлены в семействе шрифтов):

CSS-значение Описание
100 Тонкий
200 Сверхлегкий
300 Легкий
400 Нормальное начертание (базовый)
500 Средний
600 Полужирное начертание
700 Жирный шрифт
800 Сверхжирное начертание
900 Плотное начертание
normal Эквивалент значения 400 в CSS
CSS font bold Эквивалент значения 700 в CSS
Bolder На один уровень плотности больше, чем у родительского элемента
Lighter На один уровень плотности меньше, чем у родительского элемента
  • Вы будете сталкиваться с различными описаниями этих уровней, так как на данный момент не существует единых и универсальных названий и значений для них;
  • Если нужно добиться более точных настроек насыщенности шрифтов, то я не рекомендую использовать относительные значения плотности (то есть lighter или bolder), а вместо них использовать числовые значения;
  • В типографике каждый уровень насыщенности представляет собой отдельный шрифт, разработанный печатником. Из наиболее распространенных шрифтов для веб-страниц, лишь некоторые позволяют изменять уровни насыщенности (зачастую они представлены лишь в значениях 400 и 700, а во многих случаях только 400).

Что будет, если уровень насыщенности отсутствует?

Чаще всего для конкретного семейства шрифтов можно использовать лишь несколько значений насыщенности. Если вы случайно указали CSS text bold, недоступный для шрифта, то вместо него будет использовано ближайшее значение с применением следующего правила:

Уровень плотности шрифта Алгоритм выбора
100-300 Если указанная насыщенность находится в этом диапазоне, то при отсутствии нужного уровня производится подбор подходящего варианта в порядке возрастания значения.
400 Сначала проверяется значение 500. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
500 Сначала проверяется значение 400. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
600-900 Проверяются уровни насыщенности выше указанного значения, а затем перебираются значения ниже указанного в убывающем порядке.

Фальшивое жирное начертание:

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

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

/* запрещаем браузеру синтезировать полужирный стиль шрифта */
font-synthesis: none;

Прежде чем использовать о font-synthesis в своих проектах, проверьте браузерную совместимость.

Вопросы и ответы

Я думаю, что стоит сразу же ответить на вопросы, которые могут возникнуть:

Почему свойство font-weight принимает лишь девять числовых значений?

Эти девять значений позволяют охватить все традиционные типографские уровни насыщенности.

Почему бы не использовать строчные значения (CSS font weight bold)для указания насыщенности в CSS?

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

Почему числовые значения насыщенности в CSS начинаются с 100, а не с 1?

Шрифтовая шкала 100-900 продиктована форматом шрифта TrueType, в котором 400 – это регулярный стиль (то есть, базовый). Такая же шкала используется в CSS и в формате OpenType.

Данная публикация представляет собой перевод статьи «How To Fine-Tune Your Font Weights In CSS?» , подготовленной дружной командой проекта Интернет-технологии.ру

Множитель для line-height

Значение можно указать при помощи или , но гораздо лучше – задать его числом.

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

Однако, между множителем и точным значением есть одна существенная разница.

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

Значение, заданное в единицах измерения, запоминается и наследуется «как есть».
Это означает, что будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

Давайте посмотрим, как это выглядит, на примерах:

Множитель,

Конкретное значение,

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

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

Copy and Paste

A quick note on copying and pasting Unicode text: Some website actually prevent special unicode characters from showing by «sanitising» your post (deleteing all wierd characters) before saving your post to the server. This isn’t common, but it’s worth knowing. If that happens, it’s not a problem with this translator, it just means the website doesn’t allow special characters. Another thing you might come across when you copy and paste text fonts from this generator is that characters may show up as squares when you paste them. This means that the font which is being used by the website where you pasted the font doesn’t support special unicode characters. Again, this is unavoidable 🙁 Unicode is becoming more and more common though, so things are getting better.

And one final note: If you copy and paste the fonts in a messenger program or an SMS/text message, then the recipient may not actually see the characters like you see them. They may see blocks or perhaps nothing at all. Though this is rare, it does happen becomes some devices don’t support as much of the Unicode symbol set as yours does.

Thanks for using my text fonts generator! I also made an emoji translator, a wingdings translator, and a glitch text generator which you might like to check out!

Set Font Size With Em

To allow users to resize the text (in the browser menu), many
developers use em instead of pixels.

The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is
16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h1 {  font-size: 2.5em; /* 40px/16=2.5em */}h2 {  font-size: 1.875em; /* 30px/16=1.875em */
}p {  font-size: 0.875em; /* 14px/16=0.875em */}

In the example above, the text size in em is the same as the previous example
in pixels. However, with the em size, it is possible to adjust the text size
in all browsers.

Unfortunately, there is still a problem with older versions
of IE.
The text becomes larger than it should
when made larger, and smaller than it should when made smaller.

Атрибуты¶

Альтернативный текст для области изображения.
Координаты активной области.
Задаёт адрес документа, на который следует перейти.
Указывает язык документа, на который ведёт ссылка.
Форма области.
Имя фрейма, куда браузер будет загружать документ.
Устанавливает MIME-тип документа, на который ведёт ссылка.

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

alt

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

Синтаксис

Значения

Любая подходящяя текстовая строка.

Значение по умолчанию

Нет.

coords

Атрибут устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.

Значения координат представляют собой набор чисел, разделённых запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.

Синтаксис

Значения

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

Для прямоугольника () определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

Для окружности () определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.

Для полигона (многоугольника) () последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.

Значение по умолчанию

Нет.

href

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript.

Значение по умолчанию

Нет.

hreflang

Атрибут указывает язык документа, на который ведёт ссылка активной области изображения.

Синтаксис

Значения

Код языка

Значение по умолчанию

Нет.

shape

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

Синтаксис

Значения

Область в виде окружности.
Указывает всю область.
Область в виде полигона (многоугольника).
Прямоугольная область.

Значение по умолчанию

rect

target

Атрибут определяет, как открывать ссылки — в новой вкладке, в текущей вкладке или в окне фрейма.

Синтаксис

Значения

В качестве значения используется имя фрейма, заданное атрибутом name элемента . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имён используются следующие.

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

Значение по умолчанию

_self

type

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

Синтаксис

Значения

MIME-тип

Значение по умолчанию

Нет.

Text Font Generator

This text font generator allows you to convert normal text into different text fonts that you can copy and paste into Instagram, Facebook, Twitter, Twitch, YouTube, Tumblr, Reddit and most other places on the internet. The different text fonts are all a part of the Unicode standard which means that they’re not like normal fonts. If they were normal fonts you wouldn’t be able to copy and paste them anywhere.

If you’re wondering why on Earth it’s possible to copy these fonts and paste them in your social media posts, then here’s the quick explanation: Unicode is a standards body for the whole international computing industry which works on creating a list of all possible textual characters that should be available on all devices (phones, tablets, computers, …). Most large companies in the computing industry (Google, Apple, Microsoft, Samsung, Canonical, …) comply with the Unicode standard or at least some portion of it.

Unicode specifies over 100,000 different characters across hundreds of languages and symbol sets. So rather than each computer company inventing their own set of symbols, they can just use Unicode’s set. This essentially means that Unicode symbols work almost everywhere.

But here’s where we get back to text fonts: Amongst the thousands of symbols in Unicode is the normal alphabetic symbols (the ones you’re reading right now), but also a number of other alphabets which are different in some way. There are also thousands of characters which look like letters from the Latin alphabet, but are really symbols from other symbols sets and languages. Either way, we can pick out all sorts of symbols from the Unicode standard and use them to construct all sorts of novel textual font styles which we can copy and paste.

Here are some text fonts you can generate with this site:

  • ???? ???????????????????????????????? ???????????????? which comes in two different styles.
  • α ⓦⒾ????rd 爪ᶤЖ ????ℱ SЎ????вσⓁŞ which is generated from hundreds of different Unicode sets.
  • ???? ???????????????????? ???????????????? ????♡???????? ???????????????? ????❁???????? ????????????????????   — this one replaces all o’s with a random heart or flower emoji
  • ???? ???????????????????????????? ???????????????? that comes in two different styles (bold and normal)
  • ????????????????????????-???????????????????????? ???????????????? ????????????????
  • ʇuoɟ ʇxǝʇ spɹɐʍʞɔɐq puɐ uʍop ǝpısdn uɐ
  • ???????????????? ???????????????? ????????????

And many, many more.

If you come across other text fonts that I should include in this generator, please let me know! I’ll add it to this generator and my other ones which are copies of this (like fancy text generator). The reason there are a few copies is because my analytics showed people where searching for a «fancy text» type generator with different keywords and Google wasn’t showing the correct results.

Как сделать жирный текст CSS-стилями

Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями.

Итак, свойство font-weight может принимать фиксированные значения:

  • bold – жирный
  • bolder – еще жирнее
  • normal – начальный вид
  • lighter – делает буквы тоньше, по сравнению с normal

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

XHTML

Жирный

Еще жирнее

Совсем не жирный текст CSS

Очень жирный текст CSS

1
2
3
4
5
6

class=»bol-text»>

style=»font-weight:bold;»>Жирный

style=»font-weight:bolder;»>Еще жирнее

style=»font-weight:100;»>Совсем не жирный текст CSS

style=»font-weight:900;»>Очень жирный текст CSS

Жирный

Еще жирнее

Совсем не жирный текст CSS

Очень жирный текст CSS

Атрибуты¶

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

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

href

Путь к файлу, на который делается ссылка.

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

media

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

Синтаксис

Значения

Все устройства.
Печатающее устройство вроде принтера.
Экран монитора.
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение по умолчанию

rel

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

Синтаксис

Значения

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

Значение по умолчанию

Нет.

sizes

Указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска (именно так поступает Яндекс).

Синтаксис

Значения

Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.

Значение по умолчанию

Нет.

type

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

Синтаксис

Значения

Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип .

Значение по умолчанию

Text size

Ch

anging the size of text in an element is a good way to visually highlight it and give it importance, or on the contrary, to show that this information should not attract more attention.

To change the text size, use the CSS property . There are several ways to specify the size of the text, consider the most common ones:

Pixels

The values in pixels are often used because this approach provides very precise control over the size. The numerical value ends with the letter symbols , which should follow immediately after the number (between the number and should not be a space):

body { font-size: 14px; }

Percentages

By default, the text size in browsers is . Thus, the value of corresponds to , and is . If you define a rule that sets all text inside the element to of the default size (this will correspond to ), and then define another rule that specifies for its child element, then the text size in this element will be (that is, of ).

body { font-size: 100%; }

EM

The unit of measure lets you change the size of text relative to the size of the text in the parent element. Because the default size of text in browsers is , you can use rules similar to those used for values in percentages.

body { font-size: 14px; }
h2 { font-size: 1.2em; }

In the example, we gave the element a text size of , and for all elements it was . This means that the size of the text of the headings of the second level will be scaled with a factor of . In our case, the size of all the headers will be times the text size of the element, which means times more than , and roughly equal to . (In fact, the size will be , but most browsers will round it to .)

Note: in fact, percentages and em are two different ways to achieve the same goal. They both allow you to set the size relative to the text size of the parent element.

Keywords

CSS offers seven keywords that allow you to assign text size relative to the default size (): , , , , , and .

p { font-size: small; }

The average value of is the default text size in browsers. The other values reduce or increase the size of the text with different odds. The smallest text size of is approximately 9 pixels, each subsequent size is about more than the previous one:

Page title

Change the size of the text by using percent.

Change the size of text by using pixels.

Change the size of the text by using the x-small keyword.

Try it »

With this theme look:

  • CSS text indent first line
  • CSS text align horizontal
  • CSS text color and shadow
  • CSS change font
  • CSS web safe fonts

Безопасные веб-шрифты

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

p {
font-family : Courier; /* устанавливаем тип шрифта – Courier */
}

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

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

Рекомендуется последним в списке шрифтов указывать и семейство шрифта (generic-family). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.

Давайте рассмотрим следующий пример:


charset = "UTF-8">
	Свойство font-family

class = «times»>Параграф, отображаемый шрифтом «Times New Roman».

class = «courier»>Параграф, отображаемый шрифтом «Courier».

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

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

Результат нашего примера:


Рис. 34 Пример использования свойства font-family.

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

sans-serif (без засечек)
Семейство шрифта (font-family) Пример
Arial, Helvetica, sans-serif Съешь же еще этих сочных мандаринов.
«Arial Black», Gadget, sans-serif Съешь же еще этих сочных мандаринов.
«Comic Sans MS», cursive, sans-serif Съешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serif Съешь же еще этих сочных мандаринов.
«Lucida Sans Unicode», «Lucida Grande», sans-serif Съешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serif Съешь же еще этих сочных мандаринов.
«Trebuchet MS», Helvetica, sans-serif Съешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serif Съешь же еще этих сочных мандаринов.
serif (с засечками)
Семейство шрифта (font-family) Пример
Georgia, serif Съешь же еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serif Съешь же еще этих сочных мандаринов.
«Times New Roman», Times, serif Съешь же еще этих сочных мандаринов.
monospace (моноширинные)
Семейство шрифта (font-family) Пример
«Courier New», Courier, monospace Съешь же еще этих сочных мандаринов.
«Lucida Console», Monaco, monospace Съешь же еще этих сочных мандаринов.

Контролируем отображение шрифта

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

Имя
Для
Значения auto, block, swap, fallback, optional
По умолчанию auto
‘auto’
Использует поведение браузера по умолчанию. Обычно это поведение ‘block’.
‘block’

Устанавливает короткий период блокировки (3 секунды) и бесконечный период замены.

‘swap’

Устанавливает период блокировки в 0 секунд и бесконечный период замены.

‘fallback’

Устанавливает очень короткий период блокировки (100 мс или меньше) и короткий период замены (3 секунды).

‘optional’

Устанавливает очень короткий период блокировки (100 мс или меньше) и период замены в 0 секунды.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Атрибут style

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.

Примечание: тут мы рассматриваем атрибут для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Подробнее о возможностях CSS вы можете почитать в CSS самоучителе.

Код примера познакомит вас с новым способом форматирования документа:

Посмотрите на цвета и стили

Этот текст написан красным цветов с помощью шрифта Verdana.

Этот текст написан зеленым цветом с помощью шрифта Times.

Этот текст имеет размер 30 пикселей.

Попробовать »

Внимательно посмотрите на пример, с помощью атрибута мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты:
для заголовка — Roboto, для остального текста — Open Sans

Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:
Практическое задание № 10.
Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся

После этого с использованием тега подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:
Практическое задание № 11.

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

Каскадность в CSS

Цветовое оформление в CSS

font-size и line-height

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

Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:

Размер шрифта – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.

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

В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы и в примере выше пересекаются как раз поэтому.

В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.

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

По умолчанию в браузерах используется специальное значение .

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

Ссылка на основную публикацию