@font-face (CSS3 property) to embed any font in a Web page

@font-face Grammar Rules

@font-face {   font-family: <YourWebFontName>;   SRC: <source> [<format>][,<source> [<format>]]*;   [Font-weight: <weight>];   [Font-style: <style>]; }

Description:

1. Yourwebfontname: This value refers to the name of your custom font, preferably using the default font you downloaded, which will be referenced to the font-family in your Web element. such as "font-family:" Yourwebfontname ";"

2. Source: This value refers to the stored path of your custom font, which can be a relative path or an absolute path;

Format: This value refers to the formatting of your custom font, which is mainly used to help the browser identify the following types of values: TRUETYPE,OPENTYPE,TRUETYPE-AAT,EMBEDDED-OPENTYPE,AVG, etc. Weight and style: These two values must be familiar, weight defines whether the font is bold, style primarily defines the font style, such as italic.

instance: (Take singlemaltaregular as an example)

1. < P style= "margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px "> Download the required fonts.

2. get @font-face the required. Eot,.woff,.ttf,.svg font format font. Can be done on this website. Click to enter   (fontsquirrel )

3. font squirrel Download the file to the local computer, unzip it. You can get the font.

4. Create a new folder in the project fonts, say download fonts put in.

Style writing format:

@font-face {   font-family: ' Singlemaltaregular ';      Src:url ('.. /fonts/singlemalta-webfont.eot ');     Src:url ('.. /fonts/singlemalta-webfont.eot? #iefix ') format (' Embedded-opentype '),         url (' ... /fonts/singlemalta-webfont.woff ') format (' Woff '),      url ('.. /fonts/singlemalta-webfont.ttf ') format (' TrueType '),       url ('.. /fonts/singlemaltawebfont.svg#singlemaltaregular ') format (' SVG ');   Font-weight:normal;   Font-style:normal;}?

The last font you can refer to:

body{  font-family: ' Singlemaltaregular '}

Note: Files downloaded from the website will be automatically generated and copied directly.

@font-face (CSS3 property) to embed any font in a Web page