Rich and colorful CSS3 personalized fonts

When making a page, we often use "font-family" to define the font, whereas the font we define with "font-family" in the user's browser can be rendered depending on whether or not we have the fonts installed on the user's computer. On the network we can often see some of the foreign sites using some of the unusual and beautiful fonts, and these fonts are generally not installed on the computer, then we will introduce today how to make the page in the user's computer is not installed on the font.

CSS3 @font-face

It is not accurate to say that @font-face is a new property of CSS3, because this feature has been supported in CSS2, and IE5 has started to support it, but the way it is implemented in IE is through the EOT font format, unfortunately other browsers do not support this format.

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 rendered correctly depends on whether the user's computer installed the font. We can often see some foreign personal sites using very beautiful fonts, and these fonts are usually not installed in the user's computer, so with the font-family attribute can not be implemented, today we introduce 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 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 format, this format is not supported by other browsers. @font-face supports the following properties:

Font-family: Sets the font name of 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 stretched horizontally.
Font-size: Sets the text font size.
SRC: Sets the relative path or absolute path of a custom font.
@font-face Browser compatibility is as follows:

A simple example

To declare a font named Chantelliantiquaregular, there is an old notation:

@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 way to avoid loading fonts from the client, which is a bug in the Android system, the improvement scheme 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 reference to the EOT font file @font-face to ensure that it works correctly in IE, the second @font-face refers to multiple font formats for compatibility with other browsers, they will be searched sequentially until a supported format is found. This means that the same font needs to have multiple formats. The URL (//:) format ("no404") is a bulletproof notation.

The other HTML and CSS code are as follows:

. font-face-display {    font:66px chantelliantiquaregular, Helvetica, Sans-serif;} <p class= "Font-face-display" >take me to your heart</p>

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 designers 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 good free English fonts, this is a good place to be.

Want to rich and colorful pages need more font style, people came up with a lot of font alternatives, in addition to the @font-face scheme there are sIFR, Cufon, Typeface.js, and so on. Webfont, simply put,. Webfont is to embed the Access License table in the font, and the browser can read out the license information and decide whether the fonts should be downloaded and rendered. There is also a typekit, which is a noteworthy solution, placing fonts on third-party servers for invocation. The pros and cons of these programs will be described in detail later.