Размер шрифта в CSS с косой чертой

133

Что здесь означает косая черта:

font: 100%/120%;

html css size

— Alex
источник

font-sizeне принимает косую черту. Правильное свойство есть font.

— BoltClock

как на счет этих? background: «rgba (0, 0, 0, 0) none repeat scroll 0% 0% / auto 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». Однажды я вставил его случайно и был удивлен / доволен, когда он сработал.

— Дилан Лукс

Быстрый совет: этот формат также не требует указания семейства шрифтов? Мои браузеры игнорируют это свойство: font: 12px / 16px; но принимая это: font: 12px / 16px sans-serif; Это поведение также задокументировано здесь

— kumarharsh

@Harsh Да, для fontсокращенного свойства минимально требуется семейство (вместе с размером), как вы можете видеть в официальном определении .

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

Спасибо за разъяснения. Возможно, вы можете обновить ответ (или вопрос), поскольку это немного вводит в заблуждение, поскольку случайный читатель может предположить, что будет работать только объявление SIZE / LINE_HEIGHT.

— кумархарш

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

— Билл Ящерица
источник

Однако большинство сокращений обращаются к связанным свойствам стиля (например, border-*). Дэвид дал хорошее объяснение в комментариях к моему ответу. Что касается загадочных сокращений: конечно, правда, но чертовски полезно и довольно легко выучить.

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