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
As far as my understanding goes about this:
Text: The characters you draw with a selected (or default) font.
Font: The shapes of the characters.
You can underline text drawn with a certain font, but you cannot underline the font itself as it is a collection of shapes bound to characters. You can, though, resize the shapes so the text drawn with that font is drawn larger. (hence,
That's also why you have
font-style: italic and not
text-style: italic, since the actual shapes change when you have italic. Same goes with
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
are all used for positioning or visual changes to the already-drawn text.
font font-family font-size font-style font-variant font-weight @font-face font-size-adjust font-stretch
are all used for the way characters are displayed on the screen.