What is the difference between the terms 'text' and 'font' as used in CSS property names? Do they mean the same thing, or is there a semantic difference between a CSS property name starting with font- and one starting with text-?
For example, why do we have these CSS properties:
font-size: 34px;
text-decoration: underline;
instead of them being named like this?
font-size: 34px;
font-decoration: underline;
or like this?
text-size: 34px;
text-decoration: underline;
Is there a semantic difference in the way font- and text- are being used here, or is the choice of prefix completely arbitrary?
As far as my understanding goes about this:
Text: The way the layout and presentation is computed.
Font: A character to glyph mapping. The 1-to-1 'mapping' doesn't entirely hold up when you consider ligatures and other advanced font features, but in general it is a good mental model. The font determines the shape of the characters.
You can underline text drawn with a certain font, but you cannot underline the font itself. You can, though, resize the shapes such that text drawn with that font has larger glyphs. (hence, font-size)
That's also why you have font-style: italic and not text-style: italic, since the actual shapes change when you typeset in italic. The same goes with font-weight vs text-weight.
Hope this helps.
If you look at the properties starting with text- and those starting with font- you can see a clear difference:
text-align
text-decoration
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap
These are all used for layout, positioning or visual presentation of the text.
font
font-family
font-size
font-style
font-variant
font-weight
@font-face
font-size-adjust
font-stretch
And these are all used to transform the shapes of the characters, the glyphs.