'font-' vs 'text-' в именах свойств CSS

Ответ 1

Насколько я понимаю, это:

Текст: символы, которые вы рисуете с выбранным (или по умолчанию) шрифтом.

Шрифт: формы символов.

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

Вот почему у вас есть font-style: italic, а не text-style: italic, так как фактические фигуры меняются, когда вы имеете курсив. То же самое происходит с font-weight vs text-weight.

Надеюсь, что это поможет:)

ИЗМЕНИТЬ:

Если вы посмотрите на свойства, начинающиеся с text- и те, которые начинаются с font-, вы можете видеть явное различие:

text-align
text-decoration
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap

все используются для позиционирования или визуальных изменений в уже нарисованном тексте.

font
font-family
font-size
font-style
font-variant
font-weight
@font-face
font-size-adjust
font-stretch

все используются для отображения символов на экране.

Ответ 2

Части имени свойства CSS не имеют значения, а имя свойства в целом имеет только значение, назначенное ему в спецификациях CSS (или черновиках). Обычно имена, интерпретируемые как английские слова, наводят на размышления о значении, но имя не определяет смысл, а некоторые имена прямо вводят в заблуждение. (Например, white-space влияет на деление на строки даже в контекстах, где не задействованы пробельные символы.)

Итак, имена - это просто идентификаторы, но в назначении имен может быть какая-то систематика. Как это происходит, имена свойств, начинающиеся с font-, относятся к выбору шрифта, используемого для визуализации символов, или к конкретному способу использования шрифта. Имена свойств, начинающиеся с text-, относятся к другим аспектам форматирования текста (символов).

Это разделение относительно ясное, но оно зависит от методов: некоторые особенности форматирования связаны с шрифтами из-за того, как работают технологии шрифтов, а некоторые нет.

Деление отражается в разделе "модуль" CSS3: функции, связанные с шрифтом, определены в CSS Fonts Module Level 3 (который определяет свойства с имена, начинающиеся с font), тогда как другие функции форматирования текста в основном определяются в CSS Text Module Level 3 (который определяет некоторые свойства с именами, начинающимися с text-, но и другими свойствами).

Ответ 3

Оглядываясь на свойства font-, перечисленные в Справочник MDN CSS, мне кажется, что свойства, начинающиеся с font-, влияют, или на как минимум, могут повлиять на выбор шрифта из семейства шрифтов, чтобы использовать его для рисования определенного символа. Свойства, начинающиеся с text-, никогда не делают этого, но делают все виды других вещей, включая пост-рендеринг, для добавления текстовых эффектов, таких как тени, которые не зависят от выбора глифа.

Например...

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

• font-size - возможно, влияет на выбранный фактический шрифт, поскольку не все форматы шрифтов произвольно масштабируемы. Это подтверждается следующей цитатой из шрифтов-семейных документов (внимание мое):

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

  (Хотя я предполагаю, что это в основном историческая проблема, так как я не думаю, что сегодня не используются масштабируемые форматы шрифтов.)

• font-size-adjust - как и выше.

• font-stretch - чтобы процитировать документы:

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

... и так далее. Не все эти свойства всегда влияют на выбор шрифта; например, font-size, очевидно, относится к рендерингу глифов, а не выбору шрифта, в случае масштабируемых шрифтов, а свойства font-weight и font-style могут привести к тому, что браузер будет синтезировать полужирный или курсивный глиф, а не использовать полужирный или курсив font, as отмечен W3:

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

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