admin管理员组

文章数量:1317904

Say I have several .otf and .dfont font files that are used in PSD for web site design. Now I need to add those fonts into the HTML/CSS code. I know @font feature of CSS3 which does that. But I am sure that it would not work for older browsers? So what is the cross browser way of doing that?

Say I have several .otf and .dfont font files that are used in PSD for web site design. Now I need to add those fonts into the HTML/CSS code. I know @font feature of CSS3 which does that. But I am sure that it would not work for older browsers? So what is the cross browser way of doing that?

Share Improve this question edited Dec 11, 2011 at 11:36 tereško 58.5k25 gold badges100 silver badges150 bronze badges asked Dec 11, 2011 at 11:13 KarineKarine 5871 gold badge12 silver badges24 bronze badges 2
  • Please consider doing some research before ing to Stack Overflow to ask a question. – Marcin Commented Dec 11, 2011 at 12:11
  • That is a very good point Marcin. Thanks for your delicate revision. – Karine Commented Dec 11, 2011 at 12:16
Add a ment  | 

4 Answers 4

Reset to default 5

Firstly, websites need not look alike in all the browsers (http://dowebsitesneedtolookexactlythesameineverybrowser./). It is perfectly fine to not display these fonts in the older browsers. Just provide a fallback as @ThiefMaster mentioned.

In case , you insist on using the same fonts even for older browsers, you might have to rely on Cufon (http://cufon.shoqolate.) for cross browser patibility. Use a feature detection (using Modernizr) and conditionally load the Cufon library. Be warned that using Cufon on body text would make the page load slower.

PS: All IE versions support web font embedding.

You can use http://www.fontsquirrel./fontface/generator to create a most-patible CSS containing the various @font-face declarations.

Obviously there will be some old browsers not supporting it - for those you should specify a regular font when using the custom font, e.g. like this:

p { font-family: "your font", sans-serif; }

I'm using FontSquirrel's @font-face kit generator, and it works pretty well in my opinion.

Check it out at http://www.fontsquirrel./fontface/generator

Shai

FontSquirrel didn't work for me. http://transfonter/, on the other hand, was perfect in order to transform DFONT to TTF.

本文标签: javascriptAdding fonts to HTMLCSS code for website users (crossbrowser)Stack Overflow