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

133

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

font: 100%/120%;
Alex
источник
4
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;
Конрад Рудольф
источник
53
Он отражает старый синтаксис набора текста, где у вас должен быть установлен шрифт, например, «10pt на 12pt» или «10pt / 12pt».
Дэвид М.
1
Я на самом деле довольно часто этим пользуюсь. Дизайнер, с которым я работаю, всегда относится к размеру, например, «14 на 22». Однажды я вставил его случайно и был удивлен / доволен, когда он сработал.
Дилан Лукс
1
Быстрый совет: этот формат также не требует указания семейства шрифтов? Мои браузеры игнорируют это свойство: font: 12px / 16px; но принимая это: font: 12px / 16px sans-serif; Это поведение также задокументировано здесь
kumarharsh
@Harsh Да, для fontсокращенного свойства минимально требуется семейство (вместе с размером), как вы можете видеть в официальном определении .
Конрад Рудольф
Спасибо за разъяснения. Возможно, вы можете обновить ответ (или вопрос), поскольку это немного вводит в заблуждение, поскольку случайный читатель может предположить, что будет работать только объявление SIZE / LINE_HEIGHT.
кумархарш
15

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

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