How do we know which fonts are installed on a user’s computer?

Learn CSS - CSS Visual Rules - Font Family recommends as a reference for web-safe fonts. This website refers to web safe font-stacks, and my confusion is over whether there is a difference between a web-safe font and a web safe font-stack. Or, for a font to be web safe, does that mean it needs to be coded in CSS as part of a font stack?

For example, as well as being the first font-family value in a font-stack list, can EACH of the fonts highlighted in blue on also be used individually as web-safe fonts, and coded in CSS as stand-alone font-family values? e.g.

font-family: "Arial Black";

Do the compatibility %s (stated on the website) also refer to when these fonts are used individually (as in the example above), or only as part of the corresponding font stack?

Similarly, can EACH of the fonts listed in the different font stacks also be used individually as web-safe fonts? e.g. based on the Arial Black font-stack from the same link in the paragraph above:

font-family: "Arial Bold";
font-family: Gadget;

I am also confused by the fact that both Times and "Times New Roman" are considered to be valid font-family values. From what I have read about the difference between typefaces and fonts, isn’t the font-family here Times, and "Times New Roman" a font included within that font-family?
(Arial, "Arial Black" and "Arial Bold" are another example of this).

Lastly, are the 5 generic fonts (serif, sans-serif, monospace, cursive and fantasy) also each considered a separate font-family which can be used individually as a web-safe font, and coded in CSS as a stand-alone font-family value? e.g.

font-family: sans-serif;

Or can they only be used as the final value in a font-stack list, to make it super web-safe? e.g.

font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;