@font-face Grammar Rules
@font-face { font-family: <YourWebFontName>; SRC: <source> [<format>][,<source> [<format>]]*; [Font-weight: <weight>]; [Font-style: <style>]; }
Description:
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 ";"
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)
- < P style= "margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px "> Download the required fonts.
get @font-face the required. Eot,.woff,.ttf,.svg font format font. Can be done on this website. Click to enter (fontsquirrel )
font squirrel Download the file to the local computer, unzip it. You can get the font.
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