CSS3 @ font-face (webfont)

First, we will introduce the common Font types and formats in the computer field.

Bitmap Font)
A dot matrix font is also called a bitmap font. Each font is represented by a set of two-dimensional pixels. This text display method is widely used in earlier computer systems (such as DOS operating systems without graphic interfaces. Because of bitmap, it is difficult to scale the dot matrix font. A specific dot matrix font can only be clearly displayed under the corresponding font size. Otherwise, the text is only forcibly enlarged and lossy, generate a mosaic-type sawtooth edge. However, Chinese font with a small font size of 8-14px (that is, the default font size used by most operating systems today) is still used on screen display to provide a higher display effect; however, nowadays, this type of dot matrix font is mainly used as an "Auxiliary" part. When the font size you set does not have a bit of image, the font will be displayed as a vector image; when printing, the printed font will be printed regardless of the size of the vector font.
Common pure dot matrix fonts include bdf, pcf, fnt, hbf, and other formats.

Stroke/contour Font (Outline Font)
PostScript font
The PostScript font is developed by Adobe for professional digital formatting. It uses PostScript and glyphs to describe the Bez curve three times, so a set of fonts can be zoomed in or out through simple mathematical deformation. But in fact, a large or small font requires additional information (hints) to look good. The data types include Type1, Type3, OCF, and CID.
TrueType font
TrueType is a computer profile font type standard jointly developed by Apple and Microsoft. The extension of this type of font file is. ttf. Standard fonts for windows and linux. The mac platform and postscript coexist.
The character (or font) outlines in the TrueType font are composed of straight lines and secondary berserx curve (béz) segments. These are more mathematical than the cubic besell curves used by the PostScript in the graphic design field (also used by the Type 1 Font. Even so, for most shapes, three secondary elements require more vertices to describe than the quadratic besell curve. This difference also means that it cannot lossless convert Type 1 to TrueType format, but you can lossless convert TrueType to Type 1.
Projects and technologies related to truetype fonts
* Wenquanyi-linux Chinese font project
* Freetype-open-source font raster Library
* Cleartype-Microsoft and Monotype technicians use TrueType's hinting technology to solve the problem of fuzzy display of fonts at low resolution. The original technology was to use dot matrix fonts when the font size was small. Later technical improvements first introduced the anti-sawtooth effect, which can smooth the font edge. Currently, "secondary pixel compensation" is commonly used (Microsoft uses this technology, also known as ClearType ), the pixel structure of the LCD is used to improve the resolution of the display. Microsoft vigorously promotes these technologies and extends them to various platforms.

OpenType font
The OpenType font is a new font format generated to ensure compatibility between Windows and Macintosh systems. it is a scalable font computer font type. It adopts the PostScript format and is jointly developed by Microsoft and Adobe to replace the New TrueType font. The file extension of these fonts is. otf. It originated from Microsoft's TrueType Open, TrueType Open and TrueType.
The main features of OpenType include:
* The font encoding is based on Unicode and supports any text or multiple types of text.
* An OpenType font can contain up to 65,536 fonts. For Chinese font, the most basic vocabulary should contain Big5 13,060 Chinese characters or GB2312-80 standard 6763 commonly used fonts, these words should be able to meet the needs of general users, for household registration management, banking systems, publishing houses, and other users, more than 20 thousand words or even more than 70 thousand words are required.
* Fonts have Advanced Font features, allowing you to fully perform Font Processing on complex texts, and apply more complex font effects through simpler scripts, such as writing English letters with a Rome letter script.
* The font file can be expanded to cross-platform, and can be set in Mac OS, Windows, and some Unix systems.
* If the OpenType CFF font is smaller than the Type 1 Font, such as the expanded font and expanded text performance are not included
Apple Advanced Typography (AAT) font
Apple's expansion of truetype fonts supports internationalization and the complex features of typographical printing. Compared with opentype, it is more flexible and expressive in the font options.


@ Font-face
@ Font-face rules allow the font to be linked to the current page and automatically download and activate the link as needed. This allows users to select the most matched fonts according to the design objectives without the limitations of the inherent available fonts on the platform. A font description symbol set defines the font attributes and font resources from the local or external sources. Multiple @ font-face rules can be used to define multiple fonts. With css font matching rules, the browser can select the fonts needed for downloading. Note that some browsers apply the same-origin policy to the font files introduced by @ font-face! 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>];
} For browser support, the main types of font files imported by @ font-face are [. eot ,. ttf ,. otf ,. woff ,. svg] woff is the W3C recommendation standard, and eot is a feature of IE. Other browsers except IE can support ttf and otf. Microsoft provides ttf2eot Conversion Software Web Embedding Fonts Tool (WEFT), there are also some online websites can complete a kind of font to other Fonts conversion (http://www.fontsquirrel.com) the Use Case webfont is especially suitable for the implementation of some monochrome icons, which is easier to use and more scalable than image display. It can also be used as a scalable background image. The fonts published on the internet involve copyright issues. Therefore, when using webfont, pay attention to the borrowed font icons. Google has a dedicated google fonts Project (https://developers.google.com/fonts? Hl = zh-CN) provides some free online webfonts for use. Unfortunately, only English is supported.