Толщина шрифта css – Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS

Leave a Comment / Css / By /

Свойство font-size | CSS справочник

CSS свойства

Определение и применение

CSS свойство font-size задает размер шрифта элемента.

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

CSS синтаксис:

font-size:"medium | small | x-small | xx-small | smaller | large | x-large | xx-large |  larger | length | initial | inherit";

JavaScript синтаксис:

object.style.fontSize = "150%"

Значения свойства

ЗначениеОписание
mediumУстанавливает размер шрифта среднего размера. Это значение по умолчанию.
smallУстанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-smallЗадает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-smallЗадает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smallerУстанавливает размер шрифта меньшего размера, чем у родительского элемента.
largeУстанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-largeУстанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-largeЗадает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
largerУстанавливает размер шрифта большего размера, чем у родительского элемента.
lengthУстанавливает размер шрифта фиксированного размера (в единицах измерения CSS — px, em, cm и др.).
%Задает размер шрифта в процентах от размера шрифта родительского элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства font-size.</title>
<style> 

 .test {
font-size : 180%; /* устанавливаем размер шрифта 180% от размера шрифта родительского элемента */
}
.test2 {
font-size : 1.5em; /* устанавливаем размер шрифта 1.5em. */
}
.test3 {
font-size : 16px; /* устанавливаем размер шрифта 16px. */
}
</style>
</head>
	<body>
		<p class = "test">Параграф с размером шрифта в процентах от размера шрифта родительского элемента (180%).</p>
		<p class = "test2">Параграф с размером шрифта 1.5em.</p>
		<p class = "test3">Параграф с размером шрифта 16px.</p>
	</body>
</html>
Пример использования свойства CSS font-size (установка размера шрифта).CSS свойства

font-size — размер текста | CSS справочник

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

12.0+ 5.5+ 1.0+ 1.0+ 7.0+ 1.0+

Описание

CSS свойство font-size позволяет увеличивать или уменьшать размер текста. Установка размера текста, в свою очередь, может изменить размеры других элементов, так как размер текста используется для вычисления значения таких единиц измерения как em и ex.

Примечание: для изменения цвета текста используется CSS свойство color, для изменения стиля — font-style, для выравнивания — text-align, а для добавления тени — text-shadow.

Значение по умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
Версия:
CSS1
Синтаксис JavaScript: object.style.fontSize=»larger»

Синтаксис

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|inherit;

Значения свойства

Значение Описание
xx-small Сверх мелкий размер шрифта.
x-small Очень маленький размер шрифта.
small Маленький размер шрифта.
medium Средний размер шрифта.
large Большой размер шрифта.
x-large Очень большой размер шрифта.
xx-large Огромный размер шрифта.
smaller Маленький размер шрифта в сравнении с родительским элементом.
larger Большой размер шрифта в сравнении с родительским элементом.
размер Указания размера с помощью единиц измерения, используемых в CSS.
% Определение размера шрифта в процентом соотношении от родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Попробуйте изменить размер текста, кликнув на нужное значение.

div {
font-size: xx-small;
}

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

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

РШ при разметке страницы задают либо в миллиметрах em, либо в пикселах px для атрибута font-size. Использование РШ в процентах, в виду большого разброса в масштабировании, не получило большого применения.

Насчет применения миллиметров или пикселей для единиц измерения для РШ здесь уже выбирать лично вам. Как вам будет удобней.
 

Но поскольку, по умолчанию, во многих программах Word, Exel, Photoshop единица измерения уже установлена в пикселах, будем рассматривать все примеры РШ также в пикселах.

Кроме того, существует специальный атрибут font-weight:..;, который отвечает, каким будет шрифт: жирным или обычным.

Задается несколькими способами либо в цифрах или в строковом формате. Если задать жирность в цифрах, то для атрибута font-weight пропишем цифру 100 для простого шрифта, или 500 для жирного. Для того, чтобы прописать в строковом формате существует лишь два параметра bold и normal; Есть и другие параметры light, medium, demi bold, но многие шрифты их не поддерживают, поэтому в строковом формате есть только два понятия жирный и простой (нежирный шрифт).

 

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

Чтобы задать межстрочный интервал нужно прописать параметры для атрибута line-height. Допустим, если мы указали РШ 14 пикселей, то и для атрибута line-height, желательно нужно указать также 14 рх.
Итак, зададим РШ в файле стилей для нашего сайта.
 

body{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight:bold; line-height: 14px; }

В этом примере мы прописали РШ для всех шрифтов, которые есть на странице. Но, для которых еще не прописаны стили для каждого элемента.

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

h2 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 800; line-height: 20px; }

А для основного контента зададим РШ 14 пикселей. Для простоты пропишем его для тега обычного текста <p>.
Вот таким образом:
 

p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 100; line-height: 14px; }

По умолчанию, выравнивание текста производится по левому краю. Если вам нужны другие параметры, измените атрибут text-align, который может принимать четыре параметра – left, right, justify, center. На простом человеческом языке это обозначает:

1. Left текст выравнивается по левому краю
2. Right текст выравнивается по правому краю
3. justify, текст автоматически занимает всю ширину страницы и выравнивается по левому и правому краю.
4. Center – текст подгоняется только по центру страницы.

Во всех примерах точкой отсчета является родительский элемент. Если мы прописали эти атрибуты для тега <p>…</p>, то все элементы находящиеся внутри этого парного тега будут обладать свойствами, заданные для родительского элемента.

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

CSS свойство font-size | назначение, допустимые значения, примеры

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

Допустимые значения

  • — точный размер шрифта в CSS-единацах измерения (px, pt)
  • — размер относительно размера шрифта родителя в CSS-единацах измерения (%, em, ex)
  • xx-small — эквивалентно font size=»1″ (относительно настроек браузера)
  • x-small — (относительно настроек браузера)
  • small — эквивалентно font size=»2″ (относительно настроек браузера)
  • medium — эквивалентно font size=»3″ (относительно настроек браузера)
  • large — эквивалентно font size=»4″ (относительно настроек браузера)
  • x-large — эквивалентно font size=»5″ (относительно настроек браузера)
  • xx-large — эквивалентно font size=»6″ (относительно настроек браузера)
  • larger — увеличивает размер шрифта на 1, относительно родительского элемента (эквивалентно font size=»+1″)
  • smaller— уменьшает размер шрифта на 1, относительно родительского элемента (эквивалентно font size=»-1″)
  • inherit — наследует значение от родителя
Значение по умолчаниюmedium
Применимоко всем элементам
Наследованиеда
Версия CSSCSS 1
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример

p {
font-size: 100%;

}
span {
font-size: 14px;
}
div {
font-size: small;
}

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— p { font-size: 1.2em; } —> </style> </head> <body> <p>Этому абзацу задан относительный размер 1.2em (что равно 120%)</p> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

  • отрицательные значения недопустимы
  • есть порог минимально допустимого размера шрифта, меньше которого бразуеры не уменьшают шрифт (если не изменяет память — 8px)

По теме

Свойство font-size-adjust Свойство font-family

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *