你的位置:首页 > 网页设计

[网页设计]增加字体和颜色样式


通过使用CSS,控制文本的字体,风格和颜色



1.基本操作:


 

 1 body{ 2   font-family: Verdana, Geneva, Tahoma, sans-serif 3 } 4  5 body{ 6   font-size: 14px 7 } 8  9 body{10   color: silver11 }12 13 body{14   font-weight: bold15 }16 17 body{18   text-decoration: underline19 }

注释:

  • font-family:定制页面中使用的字体
  • font-size:控制字体大小
  • color:为文本设置颜色
  • font-weight:影响字体的粗细
  • text-decoration:为文本增加更多风格


 

2.字体系列:


 

系列分类:

  • sans-serif
  • serif
  • monospace
  • cursive
  • fanstasy
  • 衬线:是字母末端的装饰性的小线

示例:

  • sans-serif没有衬线,适合阅读

     

 

  • Serif:有衬线,看起来传统,多出现在报纸

    

    

  • Monospace:字体包含固定宽度的字符,例如:一个“i”水平的宽度和一个“m”相同,主要用于显示软件代码示例

      

 

  • Cursive:有些看似手写,有时会在标题上使用

    

 

  • Fantasy:含有某种风格的装饰性字体:

    

总结特点:

  • serif字体看起来很高雅,传统。
  • sans-serif字体外观清晰,可读性好
  • monospace 像打字机打出来的
  • Cursive和fantasy字体给人有趣或者很有分格的感觉

 


3.使用CSS指定字体系列:

 


 

浏览器的幕后工作:

 

1 body{2   font-family: Verdana, Geneva, Tahoma, sans-serif3 }

 

注释:

  • 我们为body指定了4个候选字体
  • 浏览器会从左往右进行选择
  • 如果浏览器检查到用户没有定制的第一个字体,会接着检查第二个
  • 直到查找到用户有的字体
  • 如果前面3种特定的字体都没找到,浏览器就会使用默认的sans-serif字体

示图:

    



 

4.Wed字体的使用


 

我们都会有这样一个想法,

自己辛苦设计的页面,有很酷的字体,

不希望到了用户手里,却全都变成了默认。。。

因此:有了@font-face规则

 


 使用步骤:

  1. 找到一个字体,可以是自己所有的,也可以使用提供字体网站授权给你使用的
  2. 确保有所需字体的格式,一般建议使用web开放字体格式(.woff)
  3. 把字体文件放在web上,或者利用在线字体服务为你托管这些文件。但无论哪种,你都需要字体文件的URL
  4. 在CSS中增加@font-face属性
  5. 在CSS中使用@font-face属性

示例代码:

 1 @font-face{ 2   /*我们为我们的字体设立一个名字*/ 3   font-family: "JJStyle One"; 4   /*浏览器会加载src指定的字体文件,直到找到他能支持的一个文件*/ 5   src: ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff") 6      ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf") 7 } 8  9 10 h1{11   /*使用我们指定的字体名*/12   font-family: "JJStyle One",sans-serif;13 }

 注意:

  • 可以定制多个字体,但需要保证服务器上有相应的字体文件,
  • 而且要分别创建一个单独的@font-face规则,且名字唯一


 

5.调整字体大小


大多数默认的字体都不太美观,

为此,作为设计者,

都需要知道如何指定字体大小。


 

指定font-size的一些方法:

  1. PX
  2. %
  3. em
  4. 关键字

示例代码:

 1 body{ 2   /*字体的高度为14像素*/ 3   font-size: 14px 4 } 5  6 h1{ 7   /*字体大小为相对于另一个字体大小的150%,这里是相对于body字体的大小*/ 8   font-size:150% 9 }10 11 h2{12   /*相对于另一个字体1.2倍*/13   font-size: 1.2em;14 }15 16 h3{17   font-size: small18   /*关键字有:xx-small,x-small,small,medium,large,x-large,xx-large*/19 }

指定字体大小的建议:

  1. 选择一个关键字(推荐samll或mediun),指定它为body规则的字体大小。相当于页面默认大小
  2. 使用em或百分数,相对于body字体大小指定其它元素的字体大小(使用em还是百分数由你决定,因为效果都一样)
 1 body{ 2   font-family: Verdana, Geneva, Tahoma, sans-serif; 3   /*字体的高度为14像素*/ 4   font-size: small 5 } 6  7 h1{ 8   font-family: sans-serif; 9   /*字体大小为相对于另一个字体大小的150%,这里是相对于body字体的大小*/10   font-size:150%11 }12 13 h2{14   /*相对于另一个字体1.2倍*/15   font-size: 1.2em;16 }

示图:

     

 

 



 

6.改变字体粗细:


 

  • font-weight:bold
  • font-weight:normal


 

7.为字体增加风格:


 

斜体:

  1. not italic
  2. italic(文本向右倾斜,另外衬线还有弯曲)

倾斜:

  1. not oblique
  2. oblique(普通文本向右倾斜)

注意:

  • 一般来说,不论你指定什么风格,结果都不确定,有时是斜体,有时是倾斜。
  • 所以,除非真的对你很重要,不然完全可以就用斜体,不用担心差别


 

8.颜色样式:


 

指定颜色的方法:

  • 颜色名
  • 按红绿蓝对百分比指定
  • 十六进制码

 

1.按名字指定

1 body{2   background-color: silver;
3 }

2.用红绿蓝值指定颜色

1 body{2   /*rgb:红绿蓝 颜色的缩写*/3   background-color: rgb(80%, 40%, 0%);4 }5 h1{6   background-color: rgb(204,102,0);7 }

3.用16进制码指定

1 h2{2   background-color: #cc66003 }

注释:

  • 十六进制码以#开头
  • 前两位数字表示红色的分量,中间两位是绿色,后面两位是蓝色

    

  • 上图代码的“CC”的分量的计算步骤与解释如下图

                       



文本装饰:


  

 1 em{ 2   /*使<em>元素有一个从文本中间穿过的横线*/ 3   text-decoration: line-through; 4 } 5  6  7 em{ 8   /*使<em>元素有一个上画线和下划线*/ 9   text-decoration: underline overline;10 }11 12 em{13   /*使<em>元素没有任何装饰*/14   text-decoration: none;15 }16 17 h1,h2{18   color: #cc6600;19   /*在下滑框上加一条细的虚线*/20   border-bottom:thin dotted #aabbcc;21 }

 

 

The end--