CSS3 fonts

CSS3 font

##CSS3 @font-face rules

In previous versions of CSS3, web designers had to use fonts that were already installed on the user’s computer.

With CSS3, a web designer can use any font he/she likes.

When you find a font file you want to use, simply include the font file on your website and it will automatically be downloaded to users who need it.

The font you choose has @font-face rules described in the new CSS3 version.

Your "own" font is defined in the CSS3 @font-face rule.

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 fonts for URLs. Uppercase letters will produce unexpected results in IE

If you need to use fonts for HTML elements, please pass font- family attribute to reference the name of the font (myFirstFont):

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

Use bold text

You must add another @font-face rule that contains bold text:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体。
</div>
<p><b>注意:</b> Internet Explorer 8以及更早版本的浏览器 @font-face rule.</p>
</body>
</html>

The file "Sansation_Bold.ttf" is another font file that contains the bold characters of the Sansation font.

Browsers using the font family "myFirstFont" for this text should render it bold.

This way you can have many @font-face rules for the same font.

CSS3 font description

The following table lists all font descriptions and the @font-face rule definitions inside:

##font- familyRequired. Specifies the name of the font. srcRequired. Defines the URL of the font file. font-stretchOptional. Defines how to stretch the font. The default is "normal". font-styleOptional. Define the style of the font. The default is "normal". font-weightOptional. Defines the weight of the font. The default is "normal". unicode-range Optional. Defines the range of UNICODE characters supported by the font. The default is "U+0-10FFFF".

Descriptor	Value	Description
	name
	URL
	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded
	normal italic oblique
	normal bold 100 200 300 400 500 600 700 800 900
	unicode-range

Continuing Learning

new file

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

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]