Basic usage of @Font-face and how to make it compatible with all browsers

@Font-face basic introduction:

@font-face is a CSS2 syntax that allows you to display a custom font on a web page. Even if the font is not installed on the client machine, the web page can still be displayed.

This article will introduce the basic usage of @font-face and how to use it in all browsers.

@Font-face basic syntax:

@font-face { font-family: <a-remote-font-name>; src: <source> [,<source>]*; [font-weight: <weight>]; [font-style: <style>]; }

For more information, please go here: https://developer.mozilla.org/en/css/@font-face

An example:

@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }

font-family is the name of the font, src is the path of the font, which can be a local font of the client or a font on the server.

@Font-face current browser compatibility:

•Webkit/Safari (3.2+): TrueType/OpenType TT (.ttf), OpenType PS (.otf);
•Opera (10+): TrueType/OpenType TT (.ttf), OpenType PS (.otf), SVG (.svg);
•Internet Explorer: Since IE4, it supports font files in EOT format; IE9 supports WOFF;
•Firefox (3.5+): TrueType/OpenType TT (.ttf), OpenType PS (.otf), WOFF (since Firefox 3.6)
• Google Chrome: TrueType/OpenType TT (.ttf), OpenType PS (.otf), WOFF since version 6
From the above we can conclude: .eot + .ttf /.otf + svg + woff = perfect support for all browsers.

@Font-face method to make all browsers compatible:

There is a font site dedicated to @font-face: http://www.fontsquirrel.com/fontface/generator

The fontsquirrel website provides a free @font-face Kit Generator tool that can generate different font formats and provide demos directly in CSS and HTML. Allows you to quote directly to your website. You can directly use some fonts provided by the fontsquirrel website, or you can upload your own fonts and use them.

@font-face Kit Generator demo
http://www.xunzou.com/demo/font-face/Chopin-Script-fontfacekit/demo.html
@font-face Kit Generator demo
http://www.font2web.com/

@font-face demo
http://www.xunzou.com/demo/font-face/font-face.html

Other font services:
Google font API is also a good font service. Other font replacements include cufon, etc.
For more information about Google font API, please refer to the previous article: http://www.xunzou.com/blog/post/619.html

<<: Practical record of solving MySQL deep paging problem

>>: TypeScript union types, intersection types and type guards

Basic usage of @Font-face and how to make it compatible with all browsers

Vue implements Dialog encapsulation

Interpretation of the module for load balancing using nginx

Linux kernel device driver kernel debugging technical notes collation

The big role of HTML meta

Why the table file size remains unchanged after deleting data in MySQL

MySQL series: redo log, undo log and binlog detailed explanation

When backing up files in Centos7, add the backup date to the backup file

Example of using CSS3 to customize the style of input multiple-select box

Several methods for js to determine the horizontal and vertical screen viewport detection of mobile terminals

Recommend

MySQL 5.7.17 free installation version configuration method graphic tutorial (windows10)

How to quickly delete all tables in MySQL without deleting the database

HTML implementation of a simple calculator with detailed ideas

Detailed explanation of how to solve the problem that the docker container cannot access the host machine through IP

Example of using JS to determine whether an element is an array

Install two MySQL5.6.35 databases under win10

MySQL 5.7.17 and workbench installation and configuration graphic tutorial

A general method for implementing infinite text carousel with native CSS

Use ab tool to perform API stress test on the server

Summary of the differences between global objects in nodejs and browsers

Docker learning: the specific use of Container containers

Example of adding music video to HTML page

How to create a my.ini file in the MySQL 5.7.19 installation directory

Detailed explanation of the implementation principle of ACID transaction in Mysql

The practical process of login status management in the vuex project