The introduction of specified font @ font face in CSS is compatible with all browsers

Time:2021-6-12

In webpage making, if you want to use a specific font, you can use the@font-face Reference is to solve the problem that the font cannot be displayed according to the design style because the user’s computer is not installed locally.

be careful:

support@font-face In addition, IE9 only supports. EOT type fonts, while Firefox, chrome, Safari and opera support. TTF and. OTF types.

General usage:

@font-face {
 font-family: 'myFirstFont';// Define the name of the font. Use the name when you want to use the font later
 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. Take the current mainstream browsers as reference, use@font-face At least. Woff,. EOT,. SVG fonts are needed, and even. SVG fonts are needed to support more browsing versions.

. TTF,. OTF – for Firefox 3.5, Safari, opera;
. EOT – for Internet Explorer 4.0 +;
. SVG – for chrome, iPhone

Get the three file formats of the font to be used to ensure that the font can be displayed normally in mainstream browsers.

Extension: font path

Local represents the local address, and URL represents the web address (the font of the URL path will be automatically downloaded from the server when the web page is loaded, so if the font file is too large, the web page will be loaded slowly)

Such as code


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

be careful:

If multiple fonts are defined on SRC, they are candidates in order. If the defined fonts or order are modified, you need to re open the browser to see the modified effect. Refresh is invalid.

stay@font-face infont-familyThe function of thefont-family It’s different.

summary

This article about the introduction of specified font @ font face in CSS compatible with various browsers is introduced here. For more related CSS font @ font face content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!