Basic usage of @Font-face and how to make it compatible with all browsers

@Font-face basic introduction:

@font-face is a CSS2 syntax that allows you to display a custom font on a web page. Even if the font is not installed on the client machine, the web page can still be displayed.

This article will introduce the basic usage of @font-face and how to use it in all browsers.

@Font-face basic syntax:

@font-face { font-family: <a-remote-font-name>; src: <source> [,<source>]*; [font-weight: <weight>]; [font-style: <style>]; }

For more information, please go here: https://developer.mozilla.org/en/css/@font-face

An example:

@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }

font-family is the name of the font, src is the path of the font, which can be a local font of the client or a font on the server.

@Font-face current browser compatibility:

•Webkit/Safari (3.2+): TrueType/OpenType TT (.ttf), OpenType PS (.otf);
•Opera (10+): TrueType/OpenType TT (.ttf), OpenType PS (.otf), SVG (.svg);
•Internet Explorer: Since IE4, it supports font files in EOT format; IE9 supports WOFF;
•Firefox (3.5+): TrueType/OpenType TT (.ttf), OpenType PS (.otf), WOFF (since Firefox 3.6)
• Google Chrome: TrueType/OpenType TT (.ttf), OpenType PS (.otf), WOFF since version 6
From the above we can conclude: .eot + .ttf /.otf + svg + woff = perfect support for all browsers.

@Font-face method to make all browsers compatible:

There is a font site dedicated to @font-face: http://www.fontsquirrel.com/fontface/generator

The fontsquirrel website provides a free @font-face Kit Generator tool that can generate different font formats and provide demos directly in CSS and HTML. Allows you to quote directly to your website. You can directly use some fonts provided by the fontsquirrel website, or you can upload your own fonts and use them.

@font-face Kit Generator demo
http://www.xunzou.com/demo/font-face/Chopin-Script-fontfacekit/demo.html
@font-face Kit Generator demo
http://www.font2web.com/

@font-face demo
http://www.xunzou.com/demo/font-face/font-face.html

Other font services:
Google font API is also a good font service. Other font replacements include cufon, etc.
For more information about Google font API, please refer to the previous article: http://www.xunzou.com/blog/post/619.html

<<: Practical record of solving MySQL deep paging problem

>>: TypeScript union types, intersection types and type guards