CSS代码在Mac浏览器上运行但在Windows浏览器上运行？

Question

I have the following CSS:

font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing: 1px; }

It works on all Mac browsers (Chrome, Safari) But I opened my project on Chrome and Internet explorer on Windows, it displays the font as bold rather than light. I'm not sure how to fix this but I need the design to work cross platform with the design that appears on mac.

Thanks in advance.

Edit: I've tried using arial but arial doesn't become light on both mac and windows.

Answer 1

The font you see on Windows is not bold, it is just regular Arial.

In almost all Windows systems, the first available font family among those listed in the font-family value is Arial. Since Arial has no typeface of weight 100, or of any weight less than 400, the normal (400) weight typeface is used instead, by the font matching algorithm .

Fonts in standard distributions of Windows generally lack typefaces with weight less than normal. So to use lighter typefaces, you would need to use downloadable fonts (web fonts) via @font-face . See eg Is @font-face usable now? (SO has many specific questions on using @font-face , check them if you run into specific problems with it).

Answer 2

The font-family property inform the browser that it's needed to use that font. If there is no path for it, it will check if the system have that one.

In order to be able to have a font that will work on all systems, you need to use the @font-face property.

This last one will allow you to specify path for all the format font, that most of the browsers will download to display it correctly. (For your information all recent browser support it)

@font-face {
    font-family: 'myFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix') format('embedded-opentype'),
         url('myFont.woff') format('woff'),
         url('myFont.ttf') format('truetype'),
         url('myFont.svg#myFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

If you want more information about that property you can check the reference here:

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Unfortunetly in your case the font HelveticaNeue is copyrighted, you need to buy the rights to be able to use it as a webfont.

You can take a look here about pricing: http://www.fonts.com/search/all-fonts?searchtext=HelveticaNeue#product_top

Also, if you have already the right and have one of the format that you wish to convert to a webfont, you can accomplish that here:

http://www.fontsquirrel.com/

Finally, if you prefer you can use Google Fonts that will host the files for you, and you will just have a small script to insert inside your pages:

http://www.google.com/fonts

Answer 3

You can use web fonts (free or paid) as suggested by others, or just use a nice font stack that is likely to cover all bases. CSS Tricks has a nice set of them: http://css-tricks.com/snippets/css/font-stacks/

In terms of font weight, your CSS specifies a very light font weight:

font-weight: 100;

So if you want to use bold Arial instead, you need to change that.