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
Recommend
How to solve the background tiling and border breaking of CSS style div or li in IE6
The solution to the background tiling or border br...
Detailed explanation of HTML body tag and commonly used control tags in HTML
1. <body> tag: Used to mark the main body o...
How to use Linux whatis command
01. Command Overview The whatis command searches ...
SQL insert into statement writing method explanation
Method 1: INSERT INTO t1(field1,field2) VALUE(v00...
Solve the problem of MySQL server actively disconnecting when there is no operation timeout
When we use the MySQL service, under normal circu...
Two ways to install the Linux subsystem in Windows 10 (with pictures and text)
Windows 10 now supports Linux subsystem, saying g...
Implementation of VUE infinite level tree data structure display
Table of contents Component recursive call Using ...
MySQL data insertion efficiency comparison
When inserting data, I found that I had never con...
Getting Started with Nginx Reverse Proxy
Table of contents Overview The role of reverse pr...
Solve the group by query problem after upgrading Mysql to 5.7
Find the problem After upgrading MySQL to MySQL 5...
Fixed table width table-layout: fixed
In order to make the table fill the screen (the re...
Data storage implementation method in WeChat applet
Table of contents Global variable globalData Page...
Two ways to prohibit clearing the input text input cache in html
Most browsers will cache input values by defaul...
Nest.js hashing and encryption example detailed explanation
0x0 Introduction First of all, what is a hash alg...
How to connect to MySQL visualization tool Navicat
After installing Navicat The following error may ...