【JavaWeb基础 · CSS样式--字体】

364 阅读3分钟

“这是我参与8月更文挑战的第16天,活动详情查看: 8月更文挑战

font属性

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。(默认值是 not specified)

注意: line - height属性设置行与行之间的空间。

下面我们来看看它的属性。

font-family属性

font - family属性指定一个元素的字体。

font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。

有两种类型的字体系列名称:

- family-name - 指定的系列名称:具体字体的名称,比如:"times""courier""arial"。
- generic-family - 通常字体系列名称:比如:"serif""sans-serif""cursive""fantasy""monospace。

注意: 每个值用逗号分开。

注意: 如果字体名称包含空格,它必须加上引号。在HTML中使用"style"属性时,必须使用单引号。
p
{
font-family:"Times New Roman",Georgia,Serif;
}

font-style属性

font-style属性指定文本的字体样式。

属性值

  值      	描述                 
  normal 	默认值。浏览器显示一个标准的字体样式。
  italic 	浏览器会显示一个斜体的字体样式。   
  oblique	浏览器会显示一个倾斜的字体样式。   
  inherit	规定应该从父元素继承字体样式。    
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

font-size属性

font-size属性设置字体大小。

属性值

  值                                       	描述                                      
  xx-smallx-smallsmallmediumlargex-largexx-large	把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。默认值:medium。
  smaller                                 	把 font-size 设置为比父元素更小的尺寸。               
  larger                                  	把 font-size 设置为比父元素更大的尺寸。               
  length                                  	把 font-size 设置为一个固定的值。                  
  %                                       	把 font-size 设置为基于父元素的一个百分比值。            
  inherit                                 	规定应该从父元素继承字体尺寸。                         
h1 {font-size:250%}
h2 {font-size:200%}
p {font-size:100%}

font-weight属性

font-weight 属性设置文本的粗细

属性值

  值                          	描述                                      
  normal                     	默认值。定义标准的字符。                            
  bold                       	定义粗体字符。                                 
  bolder                     	定义更粗的字符。                                
  lighter                    	定义更细的字符。                                
  100200300400500600700800900	定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
  inherit                    	规定应该从父元素继承字体的粗细。                     
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

color属性

Color属性指定文本的颜色。

  值         	描述                                
  color_name	规定颜色值为颜色名称的颜色(比如 red)。            
  hex_number	规定颜色值为十六进制值的颜色(比如 #ff0000)。       
  rgb_number	规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。
  inherit   	规定应该从父元素继承颜色。                     
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}

写在最后

以上就是字体的一些CSS样式,赶快动起来,让你的字体更加漂亮吧!

以上内容,如有不正之处,欢迎掘友们批评指正。