在CSS3之前,必须使用已经在用户计算机上安装好的字体,给Web设计带来很大的局限性。现在,通过CSS3,Web设计师可以使用他们喜欢的任意字体。
1、@font-face引入网络字体
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
不兼容IE8,IE8-。
示例:
<style> @font-face { font-family: SentyPaperCut; src:url(http://hstarcdn.github.io/fonts/SentyPaperCut.ttf); } @font-face { font-family:SentyCreamPuff; src:url(http://hstarcdn.github.io/fonts/SentyCreamPuff.otf); } .font1,.font2{ font-size: 50px; } .font1{ color: red; font-family: SentyTEA-Platinum; } .font2{ color: blue; font-family: SentyCreamPuff; } </style> <span class="font1"> 自定义字体演示 </span> <span class="font2"> 自定义字体演示 </span>