在CSS中如何设置字体样式

在网页的排版中,字体占据着不可分割的一大部分,为了使平淡的网页变得丰富起来,我们就可以给字体设置一些样式,下面我就给大家简单介绍一下如何设置字体样式。







Document

 

我如果爱你

绝不像攀岩的凌霄花

借你的高枝炫耀自己

我如果爱你

绝不学痴情的鸟儿

为绿荫重复单调的歌曲

做出的效果如下图所示,比较平淡


120120120.png

我们就可以给我们写的p标签里面的文字设置字体样式了
首先我们可以给字体设置粗细,属性是Font-weight: ;里面的属性值可以写100px-900px,但这里要注意要写整百,比如300px,400px,一般网页中默认的字体大小是400px,也可以用normal来代替400px,那细体就可以用lighter来代替,它的值相当于300px,粗体就可以用bold和bolder来代替,bold代替的值是700px,bolder代替的值是900px,我们来给字体设置一个bold属性值来看看效果

    
    
    
 


Document


 

我如果爱你

绝不像攀岩的凌霄花

借你的高枝炫耀自己

我如果爱你

绝不学痴情的鸟儿

为绿荫重复单调的歌曲

来看一下效果


的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶.png

明显看出字体有加粗的效果。
那如果我想要字体倾斜呢?就需要给字体样式,它的属性是font-style: ;属性值有normal,italic,oblique,normal是正常的意思,也是默认状态,italic和oblique是倾斜的意思,那我们来给它加上倾斜的样式看看效果。

    
    
    
 


Document


 

我如果爱你

绝不像攀岩的凌霄花

借你的高枝炫耀自己

我如果爱你

绝不学痴情的鸟儿

为绿荫重复单调的歌曲

事实上事实上事实上事实上事实上事实上事实上.png

可以看出字体现在就变得倾斜了。
我们也需要给字体设置字体大小,设置字体大小的属性是font-size: ; 一般浏览器的默认字体大小是14px,那我们给字体设置25px看看效果

    
    
    
 


Document


 

我如果爱你

绝不像攀岩的凌霄花

借你的高枝炫耀自己

我如果爱你

绝不学痴情的鸟儿

为绿荫重复单调的歌曲

宋宋.png

可以明显看出来字体变大。
同时我们也可以给字体设置颜色,属性为color: ;也可以给它设置字体是什么体的,属性是font-family: ;下面我们字体设为红色楷体。

 
    
    
 


Document


 

我如果爱你

绝不像攀岩的凌霄花

借你的高枝炫耀自己

我如果爱你

绝不学痴情的鸟儿

为绿荫重复单调的歌曲

看看效果吧
red.png

经过这样简单的设置,字体就得到了美化。
小试牛刀,经验不足,请多指教。

你可能感兴趣的:(在CSS中如何设置字体样式)