@font-face is a module in CSS3. It mainly embeds self-defined Web fonts into your web pages. With the emergence of the @font-face module, we no longer need to use fonts in Web development. No more worries about only using web-safe fonts! Some people will definitely ask, can IE support such a thing? Let me tell you that the @font-face function has been supported as early as IE4. You will definitely be surprised. If you see some English websites or blogs and see some beautiful custom Web fonts, such as the logo on the homepage, Tags and the handwritten English style on the page, in a word these are all implemented by @font-face.
First let’s take a look at the grammatical rules of @font-face:
@font- face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | < font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
Value description:
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. Note that this attribute can only be used in @font-face rules.
Compatible browsers
Speaking of browser compatibility issues with @font-face, this involves a font format issue, because Different browsers have inconsistent support for font formats, so it is necessary for everyone to understand what kind of fonts are supported by various versions of browsers. I briefly mentioned several formats related to fonts earlier. I will talk about them separately below. Question, let everyone have a concept in mind:
1. TrueTpe (.ttf) format:
.ttf font is the most common font in Windows and Mac. It is a RAW format, so It is not optimized for the website. The browsers that support this font include [IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile Safari4.2+];
2. OpenType (.otf) format :
.otf font is considered to be an original font format. It is built on the basis of TrueType, so it also provides more functions. The browsers that support this font are [Firefox3.5+ , Chrome4.0+, Safari3.1+, Opera10.0+, iOS Mobile Safari4.2+];
3. Web Open Font Format (.woff) format:
.woff The font is the best format among Web fonts. It is a compressed version of open TrueType/OpenType and also supports the separation of metadata packages. The browsers that support this font include [IE9+, Firefox3.5+, Chrome6+, Safari3. 6+, Opera11.1+】;
4. Embedded Open Type (.eot) format:
.eot font is a special font for IE. This format font can be created from TrueType. Browsers that support this font include [IE4+];
5. SVG (.svg) format:
.svg font is a format based on SVG font rendering. Browsers that support this font include [Chrome4+, Safari3.1+, Opera10. 0+, iOS Mobile Safari3.2+].
Note: To implement the browser effects in this section, you need to download the above font format files! ! !
<!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> 需要引入外部字体文件显示效果。</p>
</body>
</html>