当前位置:Web前端 > css> 正文

CSS font-family

时间:2014-4-20类别:Web前端

CSS font-family

CSS font-family

网页的字体选择很有讲究,因为它直接关系到用户的阅读感受。对于字体的选择,要做到字迹清晰、大小合适、粗细恰当,这样才能使文档便于阅读,让读者满意。在不同的环境下,字体的选择和字体样式的设计要求是不同的。

 

一、语法

 

font-family:[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]*

 

说明

1、<family-name>:字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文,则应使用引号括起

2、<generic-family>:字体序列名称。下列字体中的任何一种:serif, sans-serif, cursive, fantasy, monospace。

3、想要显示的字体一定要是你计算机中有的,否则不会按照你期望的显示.上面的第三个示例说明如果有宋体就显示宋体否则显示Arial字体

4、[字体名1 , 字体名2 , *],其中的星号*,表示可以继续增加字体名.如果用户计算机没有安装,你定义的字体名1,系统会自动使用字体名2,如果没有字体名2,系统就再查找字体名3,如果都没有,将使用系统的默认字体

5、用逗号来分隔每一个值,最好在最后有一个基本字体(generic-family)

6、使用中文字体或者英文名称超过一个单词的字体时要使用"(冒号)扩起来,比如"Times News Roman","宋体"

7、HTML的font标签定义了字体,此标签已经被w3c抛弃,真正符合标准网页设计的字体定义方法是使用font-family CSS属性

 

实例

  •  
  • CSS 代码   复制
  • 
    font-family:'Lucida Grande', Verdana, Tahoma, Arial, sans-serif;
    font-size:24px;
    line-height:22px;
    color:#666666;
    
     
    /* 无衬托 h2~h3 */
    
    font-family:HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:21px;
    line-height:24px;
    color:#554d53;
    
     
     /* 手写 */
    
    font-family:Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-size:15px;
    line-height:18px;
    color:#ada8a5;
    
     
    font-family:'lucida Grande', Tahoma, Arial, Helvetica, 宋体, sans-serif;
    font-size:14px;
    line-height:21px;
    color:#454545;
    
     
    font-family:'Microsoft YaHei', 微软雅黑, 'Microsoft JhengHei', 宋体;
    font-size:14px;
    line-height:21px;
    color:#454545;
    
     
    font-family:verdana, sans-serif;
    font-size:18px;
    line-height:;
    color:#969696;
    
     
    font-family:arial, sans-serif;
    font-size:36px;
    line-height:36px;
    color:#3e3e3e;
    
     
    font-family:Arial, 宋体;
    font-size:12px;
    line-height:18px;
    color:#333333;
    
     
    font-family:Arial, 微软雅黑, 'Microsoft YaHei';
    font-size:12px;
    line-height:14px;
    
     
    font-family:Verdana, Arial, Helvetica, sans-serif;
    
     
    font-family:'Microsoft Yahei', Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px; /* 14px */
    line-height:20px; /* 25px */
    
     
    font-family:Helvetica, Helvetica, Geneva, Arial, sans-serif;
    
     
    font-family:Georgia;
    
     
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:12px;
    line-height:14px;
    
     
    font-family:'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    font-size:14px;
    line-height:16px;
    
    
    font-family:'lucida grande', tahoma, verdana, arial, sans-serif; 
    
     
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
    
    font-family:tahoma, arial, 宋体, sans-serif;
    
    font-family:宋体, 'Arial Narrow';
    
    font-family:Tahoma, Helvetica, Arial, sans-serif;
    
    font-family:Tahoma, simsun;
    
    		
  •  

    二、字体选择技巧

     

    CSS 字体常见我们使用“黑体”、“宋体”此2种中文字体,这是为什么呢,因为网页载入选择字体时候是调用访问者系统文字库的文字字体,如果没有找到字体那将显示默认的网页字体。而每个人安装的操作系统(XP\VISTA\WIN7等系统)默认包括此几种中文字体。这样我们要使用每个人操作系统自带都有的字体作为网页字体,所以不能设置我们单独安装的文字字体。如果我们设置自己单独安装的字体,在自己电脑上会实现设置字体样式,而到其它用户浏览此网页时候此网页内文字字体会大变样。

     

    三、常用字体

    宋体、黑体、微软雅黑、Arial, Helvetica, sans-serif。

     

    四、font-family总结

    使用css font-family对对象文字进行字体设置,注意使用常用字体,不要将自己安装的字体设置为网页的字体,这样一来别人浏览你网页的时候没有这样字体造成,文字不美观。通常推荐字体:黑体、宋体、微软雅黑、Arial, Helvetica, sans-serif。

     

    上一篇下一篇

    猜您喜欢

    热门推荐