Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use @ Font-face in css2, I believe most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's learn about it!

Basic introduction to @ Font-face:

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

This article introduces the basic usage of @ font-face and the methods that can be used in all browsers.

@ Font-face basic syntax:

@ font-face {font-family:; src: [,] *; [font-weight:]; [font-style:];}

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

An example:

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

Font-family is the name of the font, and src is the path to the font, either native to the client or on the server.

@ Font-face compatibility of current browsers:

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, font files in EOT format are supported; 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

As can be seen from the above: .eot + .ttf / .otf + svg + woff = perfect support for all browsers.

@ Font-face methods to make all browsers compatible:

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

The fontsquirrel website provides a free @ font-face Kit Generator tool that generates different font formats and gives demo directly in css and html. So that you can quote it directly to your website. You can use some of the fonts provided by fontsquirrel directly, or you can upload your own fonts or use them.

The above is all the content of the article "how to use @ Font-face in css2". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.