Css text style light

Как установить стиль шрифта. CSS-свойство font

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

Свойство в общем виде записывается так:

font-family — устанавливает семейство шрифтов.

font-style — задаёт стиль шрифта.

font-variant — определяет вариант шрифта.

font-weight — задаёт жирность шрифта.

font-size — указывает размер шрифта.

line-height — задаёт высоту строки.

Значения и примеры использования

Font-family

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

Font-style

Можно выбрать один из стилей оформления текста: обычный шрифт normal , курсив italic , наклонный oblique .

Font-variant

У свойства font-variant несколько значений:

small-caps — все строчные символы отображаются как заглавные уменьшенного размера.

Font-weight

Насыщенность шрифта можно определить числовым значением от 100 до 900 или ключевым словом, например, обычный шрифт normal , полужирный bold .

Возможные значения font-weight :

• 100: Thin;
• 200: Extra Light (Ultra Light);
• 300: Light;
• 400: Normal;
• 500: Medium;
• 600: Semi Bold (Demi Bold);
• 700: Bold;
• 800: Extra Bold (Ultra Bold);
• 900: Black (Heavy).

Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700).

Font-size

Размер шрифта font-size измеряется в пикселях ( px ), процентах, относительных ( em , rem ) или абсолютных единицах ( pt , cm , mm ).

Абсолютную величину шрифта можно задавать не только в пикселях, пунктах или других величинах, но и особыми ключевыми словами: xx-small , x-small , small , medium , large , x-large и xx-large . Подробно об этих ключевых словах можно узнать в спецификации.

Line-height

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

Наследование

Свойство font наследуется от родительского элемента на его дочерние элементы.

Нюансы

✅ Если заданы различные атрибуты шрифта в разных правилах для одного элемента, последнее применённое свойство переопределит предыдущие.

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

⭐ Свойство font поддерживается современными браузерами. Актуальная информация — на caniuse.com.

Чем заменить свойство font

Если нужно управлять отдельными атрибутами шрифта, например, размером, начертанием, жирностью, можно использовать соответствующие отдельные свойства — font-size , font-style и font-weight .

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

font — weight

Свойство font — weight задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.

Примеры

Скопировать ссылку «Примеры» Скопировано

 div  font-weight: normal; font-weight: bold;> div  font-weight: normal; font-weight: bold; >    Скопировать Скопировано Не удалось скопировать   

Значения относительно родительского элемента:

 div  font-weight: lighter; font-weight: bolder;> div  font-weight: lighter; font-weight: bolder; >    Скопировать Скопировано Не удалось скопировать   

 div  font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900;> div  font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Большинство шрифтов имеют два варианта начертания: обычное normal и жирное bold . Их в основном и используют.

Но браузер может отобразить и более тонкие или толстые варианты, если шрифт их поддерживает. Такие варианты задаются с помощью слов lighter и bolder или в условных единицах от сверхсветлого начертания 100 до сверхжирного или «чёрного» 900 с шагом 100 единиц.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Толщину текста можно задать с помощью ключевых слов или числовым значением:

• normal — стандартная толщина шрифта. Соответствует значению 400. Значение по умолчанию.
• bold — жирный набор текста. Соответствует 700.
• lighter — более тонкий вариант, чем в родительском элементе. Например, светлое начертание Light.
• bolder — более насыщенный вариант, чем в родительском элементе. Например, сверхжирное начертание Extra Bold.
• 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 — условные единицы насыщенности, где 400 — это стандартная насыщенность текста. Используются редко, так как большинство шрифтов имеют только обычное и жирное написание.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Если всё же решишь использовать цифры, но у выбранного шрифта нет такого варианта насыщенности, то для значений от 100 до 500 браузер выберет стандартный вариант normal , а от 600 до 900 — жирный шрифт bold .

Ещё примеры

Скопировать ссылку «Ещё примеры» Скопировано

Попробуем задать насыщенность сразу разными способами к разным элементам кода:

   
Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.  
Это текст стандартной толщины внутри контейнера 
. Он эквивалентен 400 единицам толщины.  Это текст внутри контейнера — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500. В контейнере шрифт тоньше, чем в , внутри которого он находится. Его мы задали с помощью значения lighter.   body> h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.h1> p> Это текст стандартной толщины внутри контейнера p>. Он эквивалентен 400 единицам толщины.p> div> Это текст внутри контейнера div> — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.br> span>В контейнере span> шрифт тоньше, чем в div>, внутри которого он находится. Его мы задали с помощью значения lighter.span> div> body>    Скопировать Скопировано Не удалось скопировать   

 body  font-family: "Roboto", sans-serif;> /* Зададим толщину заголовка с помощью слова bold. */h1  font-weight: bold;> /* Обычный текст в абзаце 
сделаем стандартным normal */p  font-weight: normal;> /* В контейнере текст будет средним по жирности между normal и bold */div  font-weight: 500;> /* В элементе текст будет на один уровень меньше по жирности,чем у родительского элемента, внутри которого он находится */span  font-weight: lighter;> body  font-family: "Roboto", sans-serif; > /* Зададим толщину заголовка с помощью слова bold. */ h1  font-weight: bold; > /* Обычный текст в абзаце 
сделаем стандартным normal */ p  font-weight: normal; > /* В контейнере текст будет средним по жирности между normal и bold */ div  font-weight: 500; > /* В элементе текст будет на один уровень меньше по жирности, чем у родительского элемента, внутри которого он находится */ span  font-weight: lighter; >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Денис Русаков советует

Скопировать ссылку «Денис Русаков советует» Скопировано

🛠 У каждого значения насыщенности есть своё название, принятое в типографике.

Распространённые названия насыщенности

• 100 — тонкое начертание (thin, hairline);
• 200 — сверхсветлое (extra light, ultra light);
• 300 — светлое (light);
• 400 — нормальное (normal, regular, book);
• 500 — среднее (medium);
• 600 — полужирное (semi bold, demi bold);
• 700 — жирное (bold);
• 800 — сверхжирное (extra bold, ultra bold);
• 900 — тяжёлое (black, heavy).

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

Чтобы использовать все 9 начертаний (100–900), шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в подключаемом шрифте и поэтому надёжнее использовать то значение font — weight , которое вы указали в директиве font — face .

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

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Большинство современных шрифтов имеет полный набор начертаний. Для более тонкого управления отображением шрифта используются как раз таки цифровые значения для свойства font — weight .

🛠 Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.

Источник

Как на CSS сделать текст в виде обводки со свечением?

Есть такая картинка, на которой текст: Можно ли на чистом CSS сверстать такой текст? Чтобы была обводка и свечение, как на картинке.

можно сделать обводку text-shadow: 3px 0 #a54cd9, -2px 0 #a54cd9, 0 2px #a54cd9, 0 -2px #a54cd9, 1px 1px #a54cd9, -1px -1px #a54cd9, 0px -1px #a54cd9, -1px 1px #a54cd9; а со свечением не уверена, попробовать делать абсолютно позиционированный текст с черным колором и делать ему обводку прозрачную сиреневую, больше ничего не приходит в голову. Либо старым добрым способом свг или пнг

2 ответа 2

Есть более простой и удобный способ сделать это используя возможности webkit, предлагаю такое решение:

Объяснение

Сначала сделаем саму обводку текста, цвет обводки берётся из переменной —color которая указывается в inline-стилях (Стили указанные в HTML, в атрибуте style ). Далее делаем сам эффект свечения, он делается благодаря свойству text-shadow в котором мы просто делаем тень размытой, цвет также взят с той же переменной. После чего мы делаем цвет текста прозрачным чтобы можно было увидеть фон сзади текста. После всё по вкусу, но если требуется объяснение, то вот: сделал текст более гладким с помощью шрифтов Arial и Segoe UI и сам текст большим (65 пикселей).

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'); body < background-color: #1c2555; >.text-light < vertical-align: top; display: inline-block; font-size: 80px; font-family: 'Roboto', sans-serif; font-weight: 700; white-space: nowrap; color: rgba(28, 37, 85); --os: 2px; /* outline size */ --osc: #fff; /* outline color */ --osb: 20px; /* outline shadow blur */ --osbc: rgba(255,255,255,.75); /* outline shadow blur color */ text-shadow: calc(var(--os) * 1.306562965) calc(var(--os) * .541196101) 0 var(--osc), calc(var(--os) * 1.414213562) 0 0 var(--osc), calc(var(--os) * 1.306562965) calc(var(--os) * -.541196101) 0 var(--osc), calc(var(--os) * 1) calc(var(--os) * -1) 0 var(--osc), calc(var(--os) * .541196101) calc(var(--os) * -1.306562965) 0 var(--osc), 0 calc(var(--os) * -1.414213562) 0 var(--osc), calc(var(--os) * -.541196101) calc(var(--os) * -1.306562965) 0 var(--osc), calc(var(--os) * -1) calc(var(--os) * -1) 0 var(--osc), calc(var(--os) * -1.306562965) calc(var(--os) * -.541196101) 0 var(--osc), calc(var(--os) * -1.414213562) 0 0 var(--osc), calc(var(--os) * -1.306562965) calc(var(--os) * .541196101) 0 var(--osc), calc(var(--os) * -1) calc(var(--os) * 1) 0 var(--osc), calc(var(--os) * -.541196101) calc(var(--os) * 1.306562965) 0 var(--osc), 0 calc(var(--os) * 1.414213562) 0 var(--osc), calc(var(--os) * .541196101) calc(var(--os) * 1.306562965) 0 var(--osc), calc(var(--os) * 1) calc(var(--os) * 1) 0 var(--osc), 0 0 var(--osb) var(--osbc); >.text-lignt--color-1 < --osc: #20bde0; --osbc: rgba(32,189,224, .75); margin-right: 1ch; >.text-lignt--color-2

Но лучше такое сделать на SVG, предварительно конвертировать текст в кривые.

По просьбе комментатора делаю описание кода)

Основная масса кода — text-shadow , много параметров, т.к. они создают обводку вокруг текста, несмотря на то, что есть как -webkit-text-stroke , но оно полностью не поддерживается IE, если требуется его поддержка, то придётся костылить засчёт text-shadow .

Первая строчка text-shadow просто белая подложка, чтобы прозрачный цвет не сливался с обводной.
Со второй до предпоследней — специально высчитанный мной код, чтобы сделать обводку более плотной, там каждый цвет располагается на определённый угол, кол-во строк == кол-ву сегментов (для примера скрин — где текст имеет обводку из 4х теней (4х сегментов), 12 и 40. Но в данном коде выше, используется 16 сегментов и этот параметр не изменяется. Код генерировался тут (Миксин outline text для Stylus)).
Последняя строчка отвечает уже за свечение текста.

CSS переменные используются для удобной «кастомизации» всех значений:
—os — размер «обводки»
—osc — цвет обводки
—osb — размер размытия свечения
—osbc — цвет свечения

Каждый параметр может быть общим для всех и\или изменятся для конкретного элемента.

Источник