CSS：字体家族样式的优先级

Question

see this snippet

<span style="font-family: 'Helvetica Neue';">Storico settimanale</span><BR>
<span style="font-family: 'Helvetica';">Storico settimanale</span><BR>
<span style="font-family: 'Helvetica Neue', Helvetica;">Storico settimanale</span><BR>

I know ( see here ) that browser MUST try to use the first font, if not found try the second, and go on.

But in FF * versions and IE 11 I got this:

I supposed to see Helvetica Neue on first and on third line, and Helvetica on the second.

Why I got Helvetica in the third line?

Answer 1

Helvetica Neue is a sans-serif font. The image shows a serif font on the first line. This means that the font you get on the first line is not Helvetica Neue. Your browser cannot find Helvetica Neue so it uses the default fallback font for when none of the fonts in the font-family list are available.

You get Helvetica on the third line because Helvetica Neue is not available but Helvetica is.

Answer 2

The fact that you get the standard serif font in the first <span> , and Helvetica in the last <span> , I'd take a punt say that you don't have Helvetica Neue installed on your machine.

Don't forget that the local machine should have the fonts installed, that's why you specify a font-face order.