@font-face (css3 attribute) enables embedding any font in a web page_html/css_WEB-ITnose

@font-face syntax rules

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

Instructions:

1. YourWebFontName: This value refers to your customized font name. It is best to use the default font you downloaded. It will be referenced to the font-family in your Web element. Such as "font-family:"YourWebFontName";"

2. source: This value refers to the storage path of your customized font, which can be a relative path or an absolute path;

format: This value refers to the format of your customized font, which is mainly used to help the browser identify it. Its values ​​mainly include the following types: truetype, opentype, truetype-aat , embedded-opentype, avg, etc.; weight and style: You must be familiar with these two values. Weight defines whether the font is bold, and style mainly defines the font style, such as italics.

Example: (Take SingleMaltaRegular as an example)

1. Download the required fonts.

2. Get the .eot, .woff, .ttf, .svg font format font required by @font-face. You can do it on this website. Click to enter (fontsquirrel)

3. Download the Font Squirrel file to your local computer and unzip it. You can get the font.

4. Create a new folder fonts in the project and download the fonts and put them in it.

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;}?

Final font that can be quoted:

body{  font-family: 'SingleMaltaRegular'}

Note: The style will be automatically generated in the file downloaded from the website, so you can copy it directly