CSS3 Tutorial: Using @font

Article Introduction: we often see a number of foreign personal sites using very beautiful fonts, and these fonts are usually not installed on the user's computer, so the font-family attribute can not be implemented, today we introduced the use of @font-face to implement personalized fonts.

In the Web page, we can use the CSS Font-family property to define the font, but the definition of the font on the user's computer can be properly rendered depends on whether the user's computer installed the font. We often see a number of foreign personal sites using very beautiful fonts, and these fonts are usually not installed on the user's computer, so the font-family attribute can not be implemented, today we introduced the use of @font-face to implement personalized fonts.

CSS3 @font-face

It is not accurate to say that @font-face is a new feature of CSS3, because CSS2 has already supported this feature, and Internet Explorer has supported it as early as the 5th edition, but IE is implemented through its own EOT (embeded Open Type) Font formats that are not supported by other browsers. @font-face supports the following properties:

Font-family: Sets the font name for the text.

Font-style: Sets the text style.

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

Font-weight: Sets the thickness of the text.

Font-stretch: Sets whether the text is transversely stretched and deformed.

Font-size: Sets the text font size.

SRC: Sets the relative path or absolute path of the custom font.

@font-face Browser compatibility is as follows:

4 +

3.5+

4 +

3.1+

10+

A simple example

First declare a font named Chantelliantiquaregular, there is an old way of writing this:

@font-face {font-family: "Chantelliantiquaregular"; Src:url ("Chantelli_antiqua-webfont.eot"); Src:local ("☺"), url (" Chantelli_antiqua-webfont.woff ") format (" Woff "), url (" Chantelli_antiqua-webfont.ttf ") format (" TrueType "), url (" CHANTELLI_ANTIQUA-WEBFONT.SVG#WEBFONTZJHIJBDC ") format (" SVG "); Font-weight:normal; Font-style:normal; }

The first SRC is compatible with IE, and the second SRC is compatible with other browsers. Local ("☺") is a hack writing, to avoid loading fonts from the client, this type of writing in the Android system has bugs, interested students can see "Best Practice for @Font-face CSS takes A Turn", The improvement programme is to declare two @font-face, as follows:

@font-face {font-family: "Chantelliantiquaregular"; Src:url ("Chantelli_antiqua-webfont.eot");} @font-face { font-family: "Chantelliantiquaregular"; Src:url (//:) format ("no404"), url ("Chantelli_antiqua-webfont.woff") format ("Woff"), url ("Chantelli_ Antiqua-webfont.ttf ") Format (" TrueType "), url (" CHANTELLI_ANTIQUA-WEBFONT.SVG#WEBFONTMFQI76BT ") format (" SVG "); Font-weight:normal; Font-style:normal; }

We first declare a @font-face that references the EOT font file to make sure it works in IE, and the second @font-face refers to multiple font formats to be compatible with other browsers, and they will look in order until they find the supported format. This means that the same font needs to have more than one format. The URL (//:) format ("no404") is a bulletproof, interested students can see "New @Font-face Syntax:simpler, easier," a text.

Other HTML and CSS code is as follows:

. font-face-display {font:66px chantelliantiquaregular, Helvetica, Sans-serif;} Take me to your heart

The heaviest effects are as follows:

　　

Free Fonts website Font Squirrel

Font Squirrel is a very good free font resources site, collected a lot of high-quality fonts for Web page designers for free download, there is a font format Generation tool @font-face generator, upload a font file, you can generate a variety of font formats and CSS code, Very useful. If you need some excellent free English fonts, this is a good place to be.

　　

Want rich and colorful pages need to have more font style, people come up with a lot of font substitution, in addition to @font-face program there are sIFR, Cufon, Typeface.js, and so on. Webfont, to put it simply,. Webfont is to embed the access permission table in the font, and the browser can read the license information and decide whether to download and render the fonts. In addition, Typekit is also a noteworthy solution, placing fonts on third party servers for invocation. The pros and cons of these schemes will be described in detail later.