How would I use custom fonts in CSS

Question

为了使用浏览器不支持的自定义字体，我可以尝试哪些选项？

Answer 1

UPDATE: As of 2015, the best option is to use CSS3 font-face, it's supported literally almost everywhere. There are good examples on the Google Fonts platform.

Right know probably the best option is cufon: http://cufon.shoqolate.com/generate/

It is a JavaScript libary that converts your font file on their server to a JavaScript-representation of those fonts in the browser. Works in all major browsers, looks really nice, does not slow down (like the older flash-based sIFR solution), but does require JavaScript. (without it you will still see all the text but with standard font).

Or you could use the CSS3 font-face: http://randsco.com/index.php/2009/07/04/p680 Where you basically put your fonts on the server and then use CSS to render them, plain and simple. It was a little badly supported by ALL browsers, but now it's probably your best shot. Does not require JavaScript. (I know I said cufon was your best shot, but those two are equally good, they just do it in a little different ways)

Update: Also, another reason why font-face might be better is that the text used with it becomes just like any other text in the document. Cufoned text becomes canvas tags in most browsers, and there are issues with for example text selection. Also, if you would've used cufon on any big amounts of text (like the text of the whole article, as opposed to just the heading of it), it would potentially become pretty slow (as JavaScript has to render a lot of text in that case). Headings are fine though.

Answer 2

I would reccomend Google Web Fonts. It's easy to use and all the fonts are free. You just choose a font and get a script tag that you add to your code. Simple as that. Google Fonts .

Answer 3

I dont think this can be done with css use Cufon to achieve this. This will convert your text / titles to you font by replacing them with images. The search bot will still be able to index it properly. ( SEO friendly )

http://cufon.shoqolate.com/generate/

https://github.com/sorccu/cufon/wiki/

Answer 4

you can do it with Typekit, which is a cool javascript subscription based solution that allows you to use a massive library of custom fonts.

check it out at:

http://typekit.com/

It's sweet!

Andy

Answer 5

You could also use the generate at fontsquirrel, which generates you a zip file with your font in different formats so you can use them with the @font-face css property. Works in several browsers, including IE.

http://www.fontsquirrel.com/fontface/generator