CSS3 fonts

CSS3 Font

In web pages, we can use the font-family property of CSS to define fonts. However, it depends on whether the defined font can be correctly rendered on the user's computer. Whether the font is installed on the user's computer. We often see some foreign personal websites using very beautiful fonts, but these fonts are usually not installed on the user's computer, so it cannot be achieved using the font-family attribute. Today we will introduce the use of @font- face implements personalized fonts.

It is not accurate to say that @font-face is a new feature of CSS3, because CSS2 already supports this feature, and Internet Explorer has supported it as early as version 5, but the IE implementation method It is through its own eot (Embeded Open Type) font format, which is not supported by other browsers. @font-face supports the following attributes:

Font-family: Set the font name of the text.

Font-style: Set text style.

 font-variant: Set whether the text is uppercase or lowercase.

Font-weight: Set the thickness of the text.

Font-stretch: Set whether the text is stretched horizontally.

Font-size: Set the text font size.

 src: Set the relative path or absolute path of the custom font.

Use the font you need

In the new @font-face rule, you must first define the name of the font (such as myFirstFont) and then point to the font file .

Tips: Please use lowercase letters in the URL. Uppercase letters will produce unexpected results in IE

If you need to use a font for an HTML element, please reference the name of the font (myFirstFont) through the font-family attribute:

<!DOCTYPE html>
<meta charset="utf-8"> 
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>

If you want a colorful page, you need more For font styles, people have come up with many font alternatives. In addition to the @font-face solution, there are also sIFR, Cufon, Typeface.js, etc., as well as .webfont. Simply put, .webfont has an access permission table embedded in the font. , the browser can read this licensing information and decide whether these fonts should be downloaded and rendered. In addition, Typekit is also a solution worthy of attention, which places fonts on a third-party server for calling. The advantages and disadvantages of these solutions will be introduced in detail later.

Next Section
<html> <head> <meta charset="utf-8"> </head> <style> .font-face-display { font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif; } </style> <body> <div class="font-face-display">Take me to your heart</div> </body> </html>
submitReset Code