CSS3 Embedded Web Fonts

Before, if you want to use some good-looking fonts on your website, always have to be in the PS first to do the font image. Although this can achieve the effect we want, but this increases the HTTP request (if used in multiple places), even if you merge all the pictures, it is not good management, flexibility is not high, which day want to change a more beautiful font, the workload, think it is boring! Fortunately, CSS3 has added @font-face module to help us easily solve the use of elegant fonts in Web pages, and we can customize multiple fonts as needed, but each @font-face can only define one, Multiple @font-face rules are enabled if multiple fonts are required .

@font-face The main thing is to embed their desired, or their own defined Web fonts into the Web page, and then these fonts will be placed on the server, the browser will be based on the specified command to download the corresponding font to the local cache, use it to decorate the text. That's what we call Web font embedding. For more detailed information, you can go to the show: http://www.w3school.com.cn/css3/css3_font.asp

Check the browser compatibility:

Internet Explorer + +, Firefox, Chrome, Safari, and Opera support WOFF (Web Open font Format) fonts.

Firefox, Chrome, Safari, and Opera support. TTF (True type Font) and. OTF (OpenType) font type.

Chrome, Safari and Opera also support SVG fonts/folding.

Internet Explorer also supports EOT (Embedded OpenType) fonts.

Note: Internet Explorer 8 and earlier versions do not support the new @font-face rules.

Compatible with all browser declaration methods:

@font-face{font-family:' Singlemaltaregular ';/*Custom font names*/src:url ('.. /fonts/singlemalta-webfont.eot ');/*IE9 compatibility Mode*/src:url ('.. /fonts/singlemalta-webfont.eot? #iefix ') format (' Embedded-opentype '),/*IE6~IE8*/url ('.. /fonts/singlemalta-webfont.woff ') format (' Woff '),/*Modern Browsers*/url ('.. /fonts/singlemalta-webfont.ttf ') format (' TrueType '),/*Safari,android,ios*/url ('.. /fonts/singlemalta-webfont.svg#singlemaltaregular ') format (' SVG ');/*Legacy IOS*/Font-weight:Normal;Font-style:Normal;}

PS: Above is just a rule that declares a custom font, and you want to use it to invoke it:

P { font-family: "Singlemaltaregular";}

@font-face Syntax:

Font-family: The property value specifies a custom font name, preferably using the default file name of the download font, and then you need to reference it to the font-family of the element. Although you have customized the font you want, you have to use it in an element to be effective. "Required Properties"

SRC: The attribute value specifies the location of the custom font, either a relative path or an absolute path. Format () specifies custom font formats that are primarily used to help the browser identify, mainly: Truetype,opentype,truetype-aat,svg,embedded-opentype and other types. "Required Properties"

Font-weight and Font-style: Used to specify whether the font is bold and defines the font style. Of course, you can also set font properties such as Font-size. "Optional Properties"

Font acquisition:

In @font-face, four font format eot,woff,ttf,svg are used. So we need to solve the problem of getting fonts!

We can download the special fonts we want on the dafont.com website for free:

dafont.com:http://www.dafont.com/

However, the fonts downloaded from dafont.com only have TTF format, so we also need the font conversion tool, we can use the Fontsquirrel Online conversion tool: http://www.fontsquirrel.com/tools/ Webfont-generator as long as the dafont.com downloaded in the TTF format font file upload to the site, and then select Optimal, tick the checkbox, and then download can get all the font files we want!

PS:Dafont.com Web site also has a lot of font icons can be used, this aspect can be self-search, including how to make font icons and so on.

CSS3 Embedded Web Fonts