Detailed explanation of importing special font @font-face attribute in webpage

@font-faceIt is a module in CSS3, which mainly embeds its own defined Web fonts into your web pages.

grammar rules

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

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

font-family: <YourWebFontName> : Custom font name (generally set to the imported font name), which is used to refer to the font in subsequent style rules.
src : Set the loading path and format of the font, separate multiple loading paths and formats by commas
srouce : the loading path of the font, which can be an absolute or relative URL.
format : The format of the font, which is mainly used for browser identification. Generally, there are the following types - truetype, opentype, truetype-aat, embedded-opentype, avg , etc.
font-weight is the same as  font-style that used before. 
srcThere is also a  local(font name) field after the attribute, which means that the font is loaded from the user's system, and it is loaded after failure webfont.

src: local(font name), url("font_name.ttf")

Compatible browsers

 

font format

For @font-facethe compatibility problem, the font formats recognized by each browser are not the same.
TrueType format (.ttf)
A common font format on Windows and Mac, it is a raw format, so it is not optimized for web pages.
　Browser support: IE9+, FireFox3.5+, Chrome4.0+, Safari3+, Opera10+, IOS Mobile Safari4.2+

The OpenType format (.otf)
　is based on TrueType and is also a raw format, but offers more functionality.
　Browser support: FireFox3.5+, Chrome4.0+, Safari3.1+, Opera10.0+, IOS Mobile Safari4.2+

The Web Open Font format (.woff)
　is specially optimized for web pages, so it is the best format in Web fonts. It is an open TrueType/OpenType compressed version and supports the separation of metadata packages.
　Browser support: IE9+, FireFox3.5+, Chrome6+, Safari3.6+, Opera11.1+

Embedded Open Type format (.eot)
IE specific font format, can create this format font from TrueType format.
　Browser support: IE4+

The SVG format (.svg)
is a format based on SVG font rendering.
Browser support: Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

This means that in @font-face we need at least two formats of .woff and .eot fonts, and even .svg and other fonts to support more browsing versions.

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

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

Get web fonts　

Go to Google Web Fonts and Dafont.com to download fonts in .ttf format, and then use Font Squirrel to generate fonts in .woff and other formats.
Web fonts are also available at the following sites:
http://webfonts.fonts.com/
http://typekit.com/
http://kernest.com/
http://nicewebtype.com/fonts/

@font-face file conversion

Here are some recommended @font-face file conversion websites:
freefontconverter: http://www.freefontconverter.com/
font-face generator: https://everythingfonts.com/font-face
Online Font Converter: http://onlinefontconverter. com/
font2web For
more conversion tools, please refer to the address: http://blog.csdn.net/xiaolongtotop/article/details/8316554

The special fonts are already in your computer, now we need to figure out a way to get the .eot, .woff, .ttf, .svg font formats required by @font-face. To obtain these font formats, we also need third-party tools or software to achieve it. Below I recommend a commonly used tool , fontsquirrel.

If you enter the page and don't see the above picture, you can click the navigation directly:

If you see the above interface, it's easy to handle. Let's see how to use this tool to generate various fonts required by @font-face. First upload the fonts we just downloaded:

After uploading, operate as shown below:

Now the file downloaded from Font Squirrel has been saved on your local computer, then just unzip it, you can see the file list as follows:

So far, we have customized the required SingleMalta font through @font-face, and we are only one step away from the final effect, which is to apply our own defined font to the DOM elements in your web:

h2.singleMalta {font-family:'YourWebFontName'}     
      

Reference address:
http://www.cnblogs.com/fsjohnhuang/p/4320083.html
http://www.w3cfuns.com/article-5597432-1-1.html

Author: See the rainbow after the storm

Source: http://www.cnblogs.com/moqiutao/

Disclaimer: If you think this article is helpful to your study, please pay more attention to support and encouragement.

I am reading this boy's shoes on my blog. I see that you have an extraordinary bearing, and you have the air of a king in your conversation, and you will definitely do something in the future! There is the word "recommended" in the lower right corner of the screen . If you think it is helpful to you, you can click on it.