在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>
CSS3入门之字体
原文地址:https://www.cnblogs.com/yourName/p/8522641.html