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

MySQL 8.0.15 installation and configuration tutorial under Win10

What I have been learning recently involves knowl...

Vue implements video upload function

This article example shares the specific code of ...

CSS layout tutorial: How to achieve vertical centering

Preface I have been summarizing my front-end know...

How to install Element UI and use vector graphics in vue3.0

Here we only focus on the installation and use of...

Detailed explanation of setting Context Path in Web application

URL: http://hostname.com/contextPath/servletPath/...

JavaScript+html implements random QR code verification on front-end pages

Share the cool front-end page random QR code veri...

The difference between GB2312, GBK and UTF-8 in web page encoding

First of all, we need to understand that GB2312, ...

Centos7 installation of Nginx integrated Lua sample code

Preface The computer I use is a Mac, and the oper...

Solution to MySQL server login error ERROR 1820 (HY000)

Fault site: Log in to the MySQL server and get th...

Understanding of CSS selector weight (personal test)

Copy code The code is as follows: <style type=...

Explore VMware ESXI CLI common commands

Table of contents 【Common commands】 [Summary of c...