css3 @font-face_html/css_WEB-ITnose-HTML Tutorial-php.cn

css3 @font-face_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:33

Original

1297 people have browsed it

For a long time, web designers have always had to use some "web-safe" fonts. Now @font-face can load server-side font files, allowing the browser to display fonts that are not in the user's computer. Installed fonts.

The principle is: the font file is placed on the web server and automatically downloaded to the user's computer when needed.

1. Introduction to @font-face

Syntax:

@font-face {      font-family: <YourWebFontName>;      src: <source> [<format>][,<source> [<format>]]*;      [font-weight: <weight>];      [font-style: <style>];    }

Copy after login

Parameter description:

YourWebFontName: This value is your own defined font name , it's best to use the default font name you downloaded, which will be referenced in the font-family attribute of your web element.

source: The storage path of the custom font, which can be a relative path or an absolute path.

format: refers to the format of the custom font, which is mainly used to help the browser identify it. Its values have the following types: truetype, opentype, truetype-aat, embedded-opentype, avg, etc.

Font-weight and font-style define whether the font is bold and the font style.

Browser compatible writing:

 @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 */                         }

Copy after login

2. How to use

1. Download special fonts

For example, I want to download single-malta.font For this font, the download link is

http://www.dafont.com/single-malta.font

After downloading and decompressing, you can see a ttf file.

2. Use third-party tools to generate the font format required by @font-face, that is, .eot, .woff, .ttf, .svg font formats:

Third-party tool link: http: //www.fontsquirrel.com/fontface/generator

The specific steps are to upload the font downloaded in the first step on the WEBFONT GENERATOR page, and then download and decompress it.

After downloading and decompressing, I found that the folder has a lot of redundant demo pages and css. We only need four files: .woff, .ttf, .svg, and .eof. Copy these four files to the site's fonts directory. The preparations are now complete.

3. Add @font-face related code in style.css.

4. You can now use font-familyl in styles.

The code is as follows:

<style type="text/css">@font-face {    font-family: 'SingleMaltaRegular';    src: url(fonts/singlemalta-webfont.eot);    src: url(fonts/singlemalta-webfont.svg#SingleMaltaRegular)format('svg'),         url(fonts/singlemalta-webfont.ttf)format('truetype'),           url(fonts/singlemalta-webfont.woff)format('woff'),           url(fonts/singlemalta-webfont.eot?#iefix)format('embedded-opentype');    font-weight: normal;    font-style: normal;}h2.singleMalta {    font-family: 'SingleMaltaRegular'}</style><body><h2>普通字体</h2><h2 class="singleMalta">single malta</h2></body>

Copy after login

Effect:

3. Resource link

Detailed explanation of the @font-face attribute for importing special fonts into web pages

http://www.w3cfuns.com/thread-5597432-1-1.html

Get fonts

http://www.google.com/fonts /

http://www.dafont.com/

Third-party font generation tool

http://www.fontsquirrel.com/fontface/generator