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

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!

<<:  Details on macrotasks and microtasks in JavaScript

>>:  A small introduction to the use of position in HTML

Recommend

Solution to EF (Entity Framework) inserting or updating data errors

Error message: Store update, insert, or delete st...

Simple implementation of vue drag and drop

This article mainly introduces the simple impleme...

Three strategies for rewriting MySQL query statements

Table of contents Complex query and step-by-step ...

Solution for converting to inline styles in CSS (css-inline)

Talk about the scene Send Email Embedding HTML in...

Docker beginners' first exploration of common commands practice records

Before officially using Docker, let's first f...

A brief analysis of crontab task scheduling in Linux

1. Create a scheduling task instruction crontab -...

A must-read career plan for web design practitioners

Original article, please indicate the author and ...

How to implement DIV's blur function

Use anti-shake to make DIV disappear when the mou...

Graphical explanation of the solutions for front-end processing of small icons

Preface Before starting this article, let’s do a ...

WeChat applet canvas implements signature function

In the WeChat applet project, the development mod...

js implements a simple calculator

Use native js to implement a simple calculator (w...

Solution to 404 Problem of Tomcat Installation in Docker

Find the containerID of tomcat and enter the toma...