What is the relationship between "font" and "text" terms in the context of HTML/CSS?

This question is limited by HTML/CSS context and does not lies in "English Language & Usage" borders.

The "font" term is frequently used in "font family" meaning. Like: - "Which font?" - "Arial".

But the "font size" definitely does not mean "the size of font family" - it refers to the size of capital letters.

The font-size property sets the size of the text.

w3schools.com

If it is correct, the question is "What is the font and how is it different from the text"?

How I will use the answer on this question

I need to fill the below list/table with the correct terms.

• Root element

  • Text
    • Font family: Arial
    • Size: 14px
    • Line height: 18px

• Label element

  • Text
    • Font family: Arial
    • Size: 13px
    • Line spacing: 16px

Currently, I have Root element > text > font family and Root element > text > size hierarchy. Is it O'K instead of Root element > font > family and Root element > font > size?

Same about "color" - the "text color" of "font color"?

To answer on these subquestions, it's required to clarify the relationship between "text" and "font".