css font family issue, what if the font is not available on client side

问题

I have two website hosted on different server, there are elements that i have set the same font-family as 'TheSans', I am sure they both are not overwritten, the 'theSans' is the real and final value in css, but the font of these 2 pages just look differently with same browser. I checked on my pc and found that I don't have this 'theSans' font installed, so what actually happened there?

if the browser does not find the font, what font it will use? why the behavior is different in same browser.

回答1:

If a browser doesn't have the font, it will fall back to the other options specified in the css font-familyrule. If no addition options are specified it will just use its default. eg. below it will use Helvetica if installed, if not it will use arial, if no arial it will just pick what every sans-serif font it has

font-family: Helvetica, arial , san-serif;

Link about font-family

Now that being said, wouldn't it be nice to give the browser the font if it doesn't have it? And that is where the @font-face CSS rule comes in