Css3 @ font-face usage

@ Font-face is a module in css3. It can load server-side font files and embed fonts not installed on the client in the webpage. Microsoft's ie 5 has started to support this attribute, but only supports Microsoft's own. EOT (Embedded Open Type) format, and other browsers have not yet supported this field format. However, since safari 3.1, web page reconstruction engineers have been able to set. TTF (TrueType) and. otf (OpenType) fonts as custom fonts.

Syntax

@font-face {  [font-family: <family-name>;]?  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?  [unicode-range: <urange>#;]?  [font-variant: <font-variant>;]?  [font-feature-settings: normal|<feature-tag-value>#;]?  [font-stretch: <font-stretch>;]?  [font-weight: <weight>];  [font-style: <style>];}

Value description:

Font-family: Set the font name of the text.

Font-style: Set the text style.

Font-variant: Specifies whether the text is case sensitive.

Font-weight: Specifies the text width.

Font-stretch: sets whether the text is horizontally stretched and deformed.

Font-size: Set the text font size.

SRC: Set the relative or absolute path of the Custom font. Note that this attribute can only be used in the @ font-face rule.

Css3 @ font-FACE: specifies the font type and the corresponding parameter string provided to the format () function.

String Parameters	Font format	Default font Extension
"TrueType"	TrueType	. TTF
"OpenType"	Opentype font	. TTF,. OTF
"TrueType-AAT"	TrueType fonts with Apple advanced typography extensions	. TTF
"Embedded-OpenType"	Embedded OpenType	. EOT
"SVG"	SVG font	. SVG,. svgz

Different browsers support different font formats. To be compatible with different browsers, font-face should be defined with different fonts. For more information about font formats and font format conversion, see here.

• Internet Explorer only supports EOT
  
• Mozilla Firefox supports OTF and TTF
  
• Safari and Opera Support OTF,
  TTF and SVG
  
• Chrome supports TTF
  And SVG
  

For better compatibility, the following statement is generally used:

@font-face {font-family: 'MyWebFont';src: url('webfont.eot'); /* IE9 Compat Modes */src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */     url('webfont.woff') format('woff'), /* Modern Browsers */     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}

The demo defines the special font kincript, and you need to download the font file in advance.

@font-face {    font-family: 'KinescopeRegular';     src: url('../font/kinescope-webfont.eot');     src: url('../font/kinescope-webfont.eot?#iefix') format('embedded-opentype'),         url('../font/kinescope-webfont.woff') format('woff'),          url('../font/kinescope-webfont.ttf') format('truetype'),          url('../font/kinescope-webfont.svg#KinescopeRegular') format('svg');}

Use this kincript font for H1

h1 { font-family:'KinescopeRegular'; font-size:36px;}

You can also directly use the font-face online generation tool to generate the Code directly, upload a special font file, and then download the generated package, which contains the ready-made code.