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>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div>
</body>
</html>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