The problem of introducing specified font @font-face in CSS to be compatible with various browsers

When making a web page, if you want to use a specific font, you can reference it through @font-face , which solves the problem that the font is not installed locally on the user's computer and cannot be displayed according to the designed style.

Notice:

The browsers that support @font-face are Internet Explorer 9, Firefox Opera, Chrome and Safari. In addition, IE9 only supports .eot fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf fonts.

General usage:

@font-face {
 font-family: 'myFirstFont'; //Define the font name. When you want to use the font later, use this name src: url('YourWebFontName.ttf'),
  url('YourWebFontName.eot'); /* IE9 */
} 

h1 {font-family:'myFirstFont';}

Compatibility writing

@font-face {
 font-family: 'myFirstFont';
 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 */
}

Different browsers support different font formats. Taking the current mainstream browsers as a reference, the use of @font-face requires at least .woff, .eot, and .SVG font formats, and even .svg and other fonts are required to support more browser versions.

.TTF, .OTF - for Firefox 3.5, Safari, Opera;
.EOT - for Internet Explorer 4.0+;
.SVG - for Chrome, iPhone

Get three file formats of the font you want to use to ensure that the font can be displayed properly in major browsers.

Extension: Font Path

local means the local address, url means the URL (fonts in the URL path, when the web page is loaded, the font will be automatically downloaded from the server, so if the font file is too large, the web page will load slowly)

As code

@font-face {
  font-family: 'myFirstFont';
  src: url('YourWebFontName.eot'), local('YourFontName.eot');
}

Notice:

If multiple fonts are defined on src, they are candidate relationships in order. If the defined fonts or order are modified, you need to reopen the browser to see the modified effect. Refreshing is invalid.

The role of font-family in @font-face is to declare font variables, which is different from font-family in ordinary selectors.

Summarize

This is the end of this article about the introduction of specified fonts @font-face in CSS to be compatible with various browsers. For more relevant CSS fonts @font-face content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!