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>
<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.

Continuing Learning

new file

<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>

submit Reset Code

Automatic operation

CSS3 fonts

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]