CSS3 Embedded Web Fonts

If you want to use some good-looking fonts on your site, always have to do it in PS first. Although this can also achieve the effect we want, but this increased the HTTP request (if used in many places), even if all the pictures, but also bad management, flexibility is not high, which day want to change a more good-looking font, that workload, think all boring! Luckily, CSS3 has added @font-face module, which helps us to easily address the way elegant fonts are used in Web pages, and we can customize a variety of fonts as needed, but each @font-face can only define one Enable multiple @font-face rules if multiple fonts are required .

@font-face The main thing is to embed what you want, or the Web fonts that you define into a Web page, and then the fonts will be placed on the server, and the browser will download the corresponding font to the local cache according to the specified command, and use it to decorate the text. Which is what we call Web font embedding. For a more detailed understanding, you can go to the consortium to see: http://www.w3school.com.cn/css3/css3_font.asp

Look at the browser compatibility:

Internet Explorer 9+, 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 new @font-face rules.

All browser-compatible declarative methods:

@font-face{
font-family: "Singlemaltaregular"; /* Custom font name
/* 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 browser *
/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: The above only declares the custom font rules, want to use also to call it:

p{font-family: "Singlemaltaregular";}

@font-face Syntax:

Font-family: Its property value specifies a custom font name, preferably using the default filename for the downloaded font, and then needs to refer to the element's font-family. Although you customize the font you want, you have to use it in the element to have an effect. "Required Properties"

SRC: Its property value specifies the path of the custom font to be stored, either relative or absolute. Format () specifies the custom font format, which is mainly used to help browsers identify, mainly: Truetype,opentype,truetype-aat,svg,embedded-opentype and other types. "Required Properties"

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

Access to fonts:

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 just upload the TTF format font file that you downloaded in dafont.com, then select Optimal, check box, and then download can get all the font files we want!

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