CSS font-family displays differently on Windows and Mac OS X

For some reason, the following two code snippets display correctly on Mac OS X but are completely ignored on a Windows i.e. the font reverts to Times New Roman with default sizes and margins. Any idea why th开发者_开发问答is could be?

body {
    font-family: "Helvetica Neue", "Lucida Grande", "Sans serif";
}

#div h1, p {
    margin: 0px;
    font-size: 14px;
    color: #333;
}

---

It's sans-serif with a dash. The first two fonts are probably not installed on the Windows PC (I don't have them).

---

try something like this:

font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;

---

According to the font-family attribute, the computer's trying to find the fonts Helvetica Neue, Lucida Grande, and Sans serif.

However, the PC doesn't have the fonts Helvetica Neue or Lucida Grande installed, and it can't find the fallback font Sans serif because the browser default is sans-serif, one word, with no quotation marks.

As a suggestion, you should try adding more sans-serif fonts that can be found on Windows machines, such as Lucida Sans so it doesn't look like the terrible default sans-serif font Arial.

Your margins and font sizes should work again, though I suggest that you change font-size: 14px; to font-size: 1em; or font-size: 100%; to allow users to scale the font without destroying the layout.

Here's your fix:

body {
    font-family: "Helvetica Neue", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
}

#div h1, p {
    margin: 0;
    font-size: 1em;
    color: #333;
}