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
JS practical object-oriented snake game example
Table of contents think 1. Greedy Snake Effect Pi...
Detailed graphic tutorial on silent installation of oracle12.2 on CentOS under VMware
Environmental preparation: VMware+CentOS, jdk 1. ...
Prevent HTML and JSP pages from being cached and re-fetched from the web server
After the user logs out, if the back button on the...
404 error occurs when accessing the homepage of tomcat started in Docker mode
Scenario: When starting tomcat in docker (version...
About the role of meta in HTML (collected and sorted from the Internet)
W3Cschool explains it this way The <meta> el...
Detailed explanation of how to deploy and install the Chinese version of Redash in Docker
1. Installation Instructions Compared with local ...
DOCTYPE type detailed introduction
<br />We usually declare DOCTYPE in HTML in ...
Detailed explanation of JavaScript prototype chain
Table of contents 1. Constructors and instances 2...
Call the font according to the font name to let the browser display the font you want
Question 1: How do you instruct the browser to dis...
Detailed explanation of angular two-way binding
Table of contents Bidirectional binding principle...
mysqldump parameters you may not know
In the previous article, it was mentioned that th...
Teach you how to deploy zabbix service on saltstack
Table of contents Saltstack deploys zabbix servic...
Docker adds a bridge and sets the IP address range
I don't know if it's because the binary d...
Implementation code of front-end HTML skin changing function
50 lines of code to change 5 skin colors, includi...
Detailed explanation of Vue's caching method example
Recently, a new requirement "front-end cache...