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

Learn CSS - CSS Visual Rules - Font Family recommends https://www.cssfontstack.com/ 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 https://www.cssfontstack.com/ 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?
(e.g. https://www.cssfontstack.com/Arial-Black)

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;