css 代码中如何引入外部字体呢?


摘要:
下文讲述css代码中引用外部字体的方法分享,如下所示;

我们都知道在网页中,如果需要指定内容的字体,可使用
font-family属性后面紧跟字体名称,即可引入相应的字体
网页中使用一些特殊字体,会使网页焕然一新,具有别具一格的效果,那么如何在css中引入外部字体呢?下文将一一道来,如下所示:

  实现思路:
     1.在html页面中引入字体
     使用font-face关键字
   如:
    <style>
     /*
       fontNewName定义的字体名称
       fontFile.ttf,fontFile.eot
       引入的字体文件
     */
     @font-face
    {
     font-family: fontNewName;
     src: url('fontFile.ttf'),
          url('fontFile.eot'); /* IE9 */
     }
 
    </style>
    /*
     以上css代码即可为html页面定义一个新字体--"fontNewName"
     在其它元素上可直接使用
     */

例:

   <meta charset='utf-8' />
   <style>
     /*
       引入新字体fontNewName
     */
     @font-face
    {
     font-family: fontNewName;
     src: url('fontFile.ttf'),
          url('fontFile.eot'); /* IE9 */
     }

     div{
           font-family: fontNewName;
     }
 
    </style>
    <div>
       我使用了新字体格式
    </div>