Розмір шрифту в CSS з косою рисою

133

Що означає коса риса:

font: 100%/120%;

html css size

— Олексій
джерело

font-sizeне приймає нахилу. Правильна властивість є font.

— BoltClock

як щодо цих? тло: "rgba (0, 0, 0, 0) жодний повтор прокрутки 0% 0% / автоматичний padding-box border-box"

— jerinho.com

196

Це фактично встановлює дві властивості і еквівалентно:

font-size: 100%;
line-height: 120%;

Для цитування офіційної документації :

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

Як зазначив Девід М у коментарях, він відображає традицію набору даних щодо визначення розміру шрифту як " x pt on y pt" для позначення розміру гліфів на висоті лінії.

Але приклад у вашому запитанні насправді невірний і браузер буде ігнорувати: ви можете поєднати ці два властивості лише у fontскороченій нотації, і ви повинні вказати принаймні як розмір шрифту, так і сімейство. Тому просто писати font: 100%/120%;недостатньо; ви можете додати загальне прізвище, щоб зробити його дійсним, наприклад:

font: 100%/120% serif;

— Конрад Рудольф
джерело

Це для дзеркального старого синтаксису набору тексту, де ви мали б встановити шрифт як, наприклад, "10pt на 12pt" або "10pt / 12pt".

— Девід М

Я насправді цим користуюся зовсім небагато. Дизайнер, з яким я працюю, завжди називає розміри як, наприклад, "14 за 22". Я поставив це випадково одного дня і був здивований / задоволений, коли він працював.

— Ділан Лукес

швидке запитання: чи цей формат також не вимагає вказувати сімейство шрифтів? Мої браузери ігнорують цю властивість: шрифт: 12px / 16px; але приймаючи це: шрифт: 12px / 16px sans-serif; Така поведінка також задокументована тут

— kumarharsh

@ Harsh Так, сім'я (разом з розміром) мінімально потрібна для власного fontскорочення, як ви бачите в офіційному визначенні .

— Конрад Рудольф

дякую за роз’яснення Можливо, ви можете оновити відповідь (або питання), оскільки це дещо вводить в оману, оскільки випадковий читач може припустити, що працює лише SIZE / LINE_HEIGHT.

— кумархарш

Конрад отримав цю, але існує дуже багато таких властивостей скорочень CSS, які ви можете використовувати для скорочення таблиць стилів. Деякі з них виглядають трохи глухо, якщо ви не знаєте про них.

— Білл Ящірка
джерело

Однак більшість скорочень стосуються властивостей стилю (наприклад border-*). Девід дав гарне пояснення в коментарях до моєї відповіді. Що стосується стенограми, яка є дурною: звичайно правда, але настільки проклята корисна і її досить легко вивчити.

— Конрад Рудольф