css3 web font note_html/css_WEB-ITnose

css3 web font

@font-face syntax

　 @font-face can load server-side fonts, allowing the client browser to display fonts that are not installed on the client.

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

　: Specifies a custom font name. It is best to use the downloaded default font file name, which will be referenced to the font-family in the web element.
　: Specifies a custom font storage path, which can be a relative path or an absolute path.
　: Specifies a custom font format, which is mainly used to help the browser identify it. Its values ​​mainly include the following types, such as trutype, opentype, truetype-att, embedded-opentype, avg, etc.
　: The former is used to specify whether the font is bold, and the latter mainly defines the font style. In addition to these two attributes, similar attributes include font-variant, font-size, etc.

To implement @font-face

To use @font-face custom font normally, you need to meet the following key points.

1. Upload fonts in various formats to the server to support various browsers.
   

2. Display the specified custom font name
   in @font-face and the font source of the applied custom font.

   @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/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');}

Both font-family and src in the code block are required. Font-family is used to customize the font, and src is the source of the custom font.
　The font-family in @font-face rules is slightly different from the font-family in styles. The font-family in @font-face only declares the name of the font, but does not assign this font to the element. The font-family in the style explicitly specifies the font name for the element.
Customize the font name through font-family in the @font-face rule. This name can be any name. It is only used for reference by the font-family attribute in the element style.
The above code declares the font name "SingleMaltaRegular" through @font-face, but it will not have any actual effect. If you want the text font in the web font to be SingleMaltaRegular, you need to reference it in the corresponding element in the style code block Fonts defined by @font-face, such as:

h2{font-family:"SingleMaltaRegular";}

Due to the compatibility issues of different browsers, the support for font formats is also different. Let’s take a look at what fonts are supported by each version of the browser.

1. TureTpe (.ttf) format:

   .ttf font is the most common font for Windows and Mac and is a RAW format, so it is not optimized for websites , browsers that support this font include [IE9, Firefox3.5, Chrome4, Safari3, Opera10, iOS Mobile Safari4.2];

2. OpenType (.otf) format:

.otf font is considered an original font format, which is built on the basis of TrueType, so it also provides more functions. The browsers that support this font are [Firefox3 .5, Chrome4.0, Safari3.1, Opera10.0, iOS Mobile Safari4.2];

1. Web Open Font Format (.woff) format:

   .woff font is the best format among Web fonts. It is a compressed version of open TrueType/OpenType and also supports the separation of metadata packages. Browsers that support this font include [IE9, Firefox3.5, Chrome6, Safari3 .6, Opera11.1];

2. Embedded Open Type (.eot) format:

   .eot font is a special font for IE. This format font can be created from TrueType , browsers that support this font include [IE4];

3. SVG (.svg) format:

   .svg font is a format based on SVG font rendering , Browsers that support this font include [Chrome4, Safari3.1, Opera10.0, iOS Mobile Safari3.2].

This means that in @font-face we need at least two format fonts, .woff and .eot, and even .svg and other fonts to support more browsing versions .