Shulou(Shulou.com)06/02 Report--

This article mainly introduces which rules of css are needed to define custom fonts. It is very detailed and has a certain reference value. Friends who are interested must finish reading it!

Defining custom fonts requires css's "@ font-face" rule. The "@ font-face" rule embeds user-defined Web fonts into web pages with the syntax "@ font-face {font-family: 'font name'; src:url ('file address');}".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

How to make your page support custom fonts, a sentence is achieved using @ font-face.

@ font-face is a module in CSS3, which mainly embeds self-defined Web fonts into your web page. With the emergence of the @ font-face module, we are not afraid to use Web safe fonts in the development of Web. Let's take a look at how @ font-face is used.

First, let's take a look at the syntax rules of @ font-face:

Font-face {font-family:; src: [] [, []] *; [font-weight:]; [font-style:];}

Value description

1. YourWebFontName: this value refers to your custom font name. It is best to use the default font you downloaded, which will be referenced to the font-family in your Web element. Such as "font-family:" YourWebFontName ";"

2. Source: this value refers to the storage path of your custom font, which can be a relative path or an absolute path

3. Format: this value refers to the format of your custom font, which is mainly used to help browsers identify it. There are mainly the following types of values: truetype,opentype,truetype-aat,embedded-opentype,avg, etc.

4, weight and style: these two values must be familiar to all of you. Weight defines whether the font is bold, while style mainly defines font styles, such as italics.

Compatible browser

When it comes to the compatibility of browsers with @ font-face, there is an issue of font format, because different browsers have different support for font formats, so it is necessary for you to know what fonts are supported by various browsers. I have also briefly mentioned several font formats in front of you. I will talk about this question separately to give you an idea:

1. TureTpe (.ttf) format:

The .ttf font is the most common font for Windows and Mac, and it is a RAW format, so it is not optimized for the website. Browsers that support this font are [IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+]

2. OpenType (.otf) format:

The .otf font is considered to be a primitive font format, which is built on the basis of TureType, so it also provides more functions. Browsers that support this font have [Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+]

3. Web Open Font Format (.woff) format:

The .woff font is the best format in Web fonts. It is an open compressed version of TrueType/OpenType and also supports the separation of meta packets. 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. You can create this format font from TrueType. Browsers that support this font include [IE4+]

5. SVG (.svg) format:

.svg font is a format based on SVG font rendering, and browsers that support this font have [Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+].

This means that we need at least .woff and .eot fonts in @ font-face, and even more browsing versions of fonts such as .svg.

To enable @ font-face to achieve more browser support, Paul Irish wrote a unique @ font-face syntax called Bulletproof @ font-face:

@ font-face {font-family: 'YourWebFontName'; src: url (' YourWebFontName.eot?') Format ('eot'); / * IE*/ src:url (' YourWebFontName.woff') format ('woff'), url (' YourWebFontName.ttf') format ('truetype'); / * non-IE*/}

But in order for multiple browsers to support it, you can also write:

@ font-face {font-family: 'YourWebFontName'; src: url (' YourWebFontName.eot') / * IE9 Compat Modes * / src: url ('YourWebFontName.eot?#iefix') format (' embedded-opentype'), / * IE6-IE8 * / url ('YourWebFontName.woff') format (' woff'), / * Modern Browsers * / url ('YourWebFontName.ttf') format (' truetype'), / * Safari, Android, iOS * / url ('YourWebFontName.svg#YourWebFontName') format (' svg') / * Legacy iOS * /}

With so much empty theoretical knowledge, everyone must be a little itchy, so let's first take a look at how the blue font in the navigation section of the W3CPLUS homepage is implemented. If we have a DOM tag like this, we need to apply a custom font:

HTML Code:

Neues Bauen Demo

Define your own Web Font through @ font-face:

Font-face {font-family: 'NeuesBauenDemo'; src: url ('.. / fonts/neues_bauen_demo-webfont.eot') Src: url ('.. / fonts/neues_bauen_demo-webfont.eot?#iefix') format ('embedded-opentype'), url ('.. / fonts/neues_bauen_demo-webfont.woff') format ('woff'), url ('.. / fonts/neues_bauen_demo-webfont.ttf') format ('truetype'), url ('.. / fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format ('svg') Font-weight: normal; font-style: normal;}

What I'm using here is a relative path, but of course you can also use the absolute path. At this point, we need to apply the defined font to our actual page:

H3.neuesDemo {font-family: 'NeuesBauenDemo'} the above is all the content of the article "defining which css rules are required for custom fonts". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.