字体样式属性

1.font-size:字号大小

font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位,具体如下表所示:

相对长度单位 说明
em 倍率,相对于当前对象内文本的字体尺寸
px 像素,最常用
绝对长度单位 说明
in 英寸
cm 厘米
mm 毫米
pt

其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。

2.font-family:字体

font-family属性用于设置字体,格式如下面代码所示:

p{font-family:“微软雅黑”;}

可以同时指定多个字体,中间以英文逗号隔开如果浏览器不支持第一个字体,则会尝试后面的字体,如以下代码所示:

body{font-family:“华文彩云”,“宋体”,“黑体”;}

当指定的字体都没有安装时,就会使用浏览器默认字体。

使用font-family需要注意以下几点:

  • 各种字体之间必须使用英文逗号隔开。
  • 中文字体需要加英文引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体必须位于中文字体名之前。
  • 如果字体名中包含空格、#、¥等符号,则该字体必须加英文单引号或双引号。
  • 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

3.font-weight:字体粗细

font-weight用于定义字体的粗细,具体如下所示:

  • normal:默认值。定义标准的字符
  • bold:定义粗体字符
  • bolder:定义更粗的字符
  • lighter:定义更细的字符
  • 100~900(100的整数倍):定义由细到粗的字符。其中400等同于normal,700等同于bold,值越大字体越粗

4.font-style:字体风格

常用的font-weight的属性值为normal和bold,用于定义正常或加粗显示的字体。

font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

  • normal:默认值,浏览器会显示标准的字体样式。
  • italic:浏览器会显示斜体的字体样式。
  • oblique:浏览器会显示倾斜的字体样式。

其中italic和oblique都用于定义斜体,两者在显示效果上并没有本质区别,但实际工作中常使用italic。

5.font:综合设置字体样式

font属性用于对字体样式进行综合设置,其基本语法格式为:

选择器{font:font-style font-variant font-weight font-size/line-height font-family;}

使用font属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开。其中line-height指的是行高,例如:

p{
      font-family:“宋体”;
      font-size:30px;
      font-style:italic;
      font-weight:bold;
      font-variant:small-caps;
      line-height:40px;
  }

等价于:

p{font:italic small-caps bold 30px/40px “宋体”;}

其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

下面通过font属性对字体样式进行综合设置:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>font属性</title>
        <style type="text/css">
        .one{ font: italic 18px/30px "隶书";}
        .two{ font: italic 18px/30px;}
        </style>
    </head>
    <body>
        <p class="one">段落1:使用font属性综合设置段落文本的字体风格、字号、行高和字体。</p>
        <p class="two">段落2:使用font属性综合设置段落文本的字体风格、字号、行高和字体。由于省略了字体属性font-family,
        这时font属性不起作用。</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

 

6.@font-face属性 

@font-face属性是CSS3新增的属性,用于定义服务器字体。通过@font-face属性,开发者可以在计算机未安装字体时,仍然能使用任何喜欢的字体。使用@font-face属性定义服务器字体的基本语法格式如下:

@font-face{
     font-family:字体名称; /*用于指定该服务器字体名称,可随意定义*/
     src:字体路径;/*用于指定该字体文件路径*/
}

 

可以得出使用服务器字体的步骤如下:

  • 下载字体并存储到相应的文件夹中。
  • 使用@font-face属性定义服务器字体。
  • 对元素应用“font-family”字体样式。

7.word-wrap属性

word-wrap属性用于实现长单词和URL地址的自动换行,其基本语法格式如下:

选择器{word-warp:属性值;}

 

在上面的语法格式中,word-warp属性的取值有2种:

  • normal:只在允许断字点换行(浏览器默认处理)
  • break-word:在长单词或URL地址内部进行换行

下面通过一个URL地址换行的案例演示word-warp属性的用法:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>word-warp属性</title>
        <style type="text/css">
        p{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        .break_word{word-wrap: break-word;}  /*网址在段落内部换行*/
        </style>
    </head>
    <body>
        <span>word-warp:normal;</span>
        <p>网页平面UI设计学院http://icd.itcast.cn/</p>
        <span>word-warp:break-word;</span>
        <p class="break_word">网页平面UI设计学院http://icd.itcast.cn/</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

当浏览器处理时段落文本中的URL地址会溢出边框;当设置word-wrap属性值为break-word时,URL地址会沿边框自动换行。 

 文本外观属性

1.color:文本颜色

color属性用于定义文本颜色,其取值方式有如下3种:

  • 预定义的颜色值,如red、green、blue等
  • 十六进制,实际工作中,十六进制是最常用的
  • RGB代码,如红色可以表示rgb(255,0,0)或rgb(100%,0%,0%)

注意:如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。

十六进制颜色值中,当3个分量的2位十六进制都各自相同时,可使用CSS缩写,如#FF6600可缩写为#F60。

2.letter-spacing:字间距

letter属性用于定义字间距,所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值,允许使用负值,默认为normal。

3.word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距,对中文字符无效。和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距,而word-spacing定义的为英文单词之间的间距。

下面通过一个案例来演示word-spacing和letter-spacing的不同:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>word-spacing和letter-spacing</title>
        <style type="text/css">
        .letter{letter-spacing: 20px;}
        .word{word-spacing: 20px;}
        </style>
    </head>
    <body>
        <p class="letter">letter spacing(字母间距)</p>
        <p class="word">word spacing word spacing(单词间距)</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

 

4.line-height:行间距

line-height属性用于设置行间距。所谓行间距就是行与行之间的距离,即字符垂直间距,一般称为行高。该属性常用的属性值单位有3种,分别为像素(最常用)、相对值和百分比。

下面通过一个案例来学习line-height属性的使用:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>行高line-height的使用</title>
        <style type="text/css">
        .one{
            font-size: 16px;
            line-height: 18px;
        }
        .two{
            font-size: 12px;
            line-height: 2em;
        }
        .three{
            font-size: 14px;
            line-height: 150%;
        }
        </style>
    </head>
    <body>
        <p class="one">段落1:使用像素px设置line-height。该段落字体大小为16px,line-height属性值为18px。</p>
        <p class="two">段落2:使用像素em设置line-height。该段落字体大小为12px,line-height属性值为2em。</p>
        <p class="three">段落3:使用像素%设置line-height。该段落字体大小为14px,line-height属性值为150%。</p>
    </body>
</html>
复制代码

 

 运行效果如图所示:

 

5.text-transform:文本转换 

text-transform属性用于转换英文字符的大小写,其可用属性值如下:

  • none:不转换(默认值)
  • capitalize:首字母大写
  • uppercase:全部字符转换为大写
  • lowercase:全部字符转换为小写

6.text-decoration:文本装饰

text-decoration属性用于设置文本的下划线、上划线、删除线等装饰效果,其可用属性值如下:

  • none:没有装饰(默认)
  • underline:下划线
  • overline:上划线
  • line-through:删除线

text-decoration后可以赋多个值,用于给文本添加多种显示效果。例如希望文字同时有下划线和删除线效果,就可以将underline和line-through同时赋给text-decoration。

下面通过一个案例来演示text-decoration各个属性值的显示效果:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本装饰text-decoration</title>
        <style type="text/css">
        .one{text-decoration: underline;}
        .two{text-decoration: overline;}
        .three{text-decoration: line-through;}
        .four{text-decoration: underline line-through;}
        </style>
    </head>
    <body>
        <p class="one">设置下划线(underline)</p>
        <p class="two">设置上划线(overline)</p>
        <p class="three">设置删除线(line-through)</p>
        <p class="four">同时设置下划线和删除线(underline line-through)</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

7.text-align:水平对齐方式 

  • left:左对齐(默认)
  • tight:右对齐
  • center:居中对齐

注意:text-align属性仅适用于块级元素。对行内元素无效

8.text-indent:首行缩进

text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数,或相对于浏览器窗口宽度的百分比%,允许使用负值。建议使用em作为设置单位。

下面通过一个案例来学习text-indent的使用:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首行缩进text-indent</title>
        <style type="text/css">
        p{font-size: 14px;}
        .one{text-indent: 2em;}
        .two{text-indent: 50px;}
        </style>
    </head>
    <body>
        <p class="one">这是段落1中的文本,text-indent属性可以对段落文本设置首行缩进效果,段落1使用text-indent:2em</p>
        <p class="two">这是段落2中的文本,text-indent属性可以对段落文本设置首行缩进效果,段落2使用text-indent:50px</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

9.white-space:空白符处理 

使用HTML5制作网页时,不论源代码中有多少空格,在浏览器中会显示一个字符的空白。在CSS3中,使用white-space属性可设置空白符的处理方式,其属性值如下:

  • normal:常规(默认值),文本中的空格、空行无效,满行后自动换行。
  • pre:预格式化,按文档的书写格式保留空格、空行原样显示。
  • nowrap:空格、空行无效,强制文本不能换行,除非遇到换行标记<br />。内容超出元素的边界也不换行,若超出浏览器页面则会增加滚动条。

下面通过一个案例来演示white-space各个属性值的效果:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>空白符处理white-space</title>
        <style type="text/css">
        .one{white-space: normal;}
        .two{white-space: pre;}
        .three{white-space: nowrap;}
        </style>
    </head>
    <body>
        <p class="one">这个       段落        有很多
        空格。此段落应用white-space:normal;。</p>
        <p class="two">这个       段落        有很多
        空格。此段落应用white-space:pre;。</p>
        <p class="three">此段落应用white-space:nowrap;。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。
        这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长
        的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

10.text-shadow:阴影效果

在CSS中,使用text-shadow属性可以为页面中的文本添加阴影效果。其基本语法为:

选择器{text-shadow:h-shadow v-shadow blur color;}

 

在上面的语法格式中,h-shadow用于设置水平阴影的距离,v-shadow用于设置垂直阴影的距离,blur用于设置模糊半径,color用于设置阴影颜色。

下面通过一个案例来演示text-shadow属性的用法:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>text-shadow属性</title>
        <style type="text/css">
        p{
            font-size: 50px;
            text-shadow: 10px 10px 10px red; /*设置文字阴影的距离、模糊半径和颜色*/
        }
        </style>
    </head>
    <body>
        <p>Hello CSS3</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

注意:当设置水平距离参数或垂直距离参数为负值时,可以改变阴影的投射方向。阴影模糊的半径参数只能设置为正值,并且数值越大阴影向外模糊的范围也就越大。

设置阴影叠加效果

可以使用text-shadow属性给文字添加多个阴影,从而产生阴影叠加的效果,方法为设置多组阴影参数,中间用英文逗号隔开。

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>text-shadow属性</title>
        <style type="text/css">
        p{
            font-size: 50px;
            text-shadow: 10px 10px 10px red, 20px 20px 20px blue;
        }
        </style>
    </head>
    <body>
        <p>Hello CSS3</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

 

 

11.text-overflow:标示对象内溢出文本

在CSS3中,text-overflow属性用于标示对象内溢出的文本,其基本语法格式为:

选择器{text-overflow:属性值;}

 

在上面的语法格式中,text-overflow属性的常用取值有2个,具体解释如下:

  • clip:修剪溢出文本,不显示省略标记“...”
  • ellipsis:用省略标记“...”标示被修剪文本,省略标记插入的位置是最后一个字符 

 下面通过一个案例来演示text-overflow属性的用法:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>text-overflow属性</title>
        <style type="text/css">
        p{
            width: 200px;
            height: 100px;
            border: 1px solid #000;
            white-space: nowrap;   /*强制文本不能换行*/
            overflow: hidden;   /*修剪溢出文本*/
            text-overflow: ellipsis; /*用省略标记标示被修剪的文本*/
        }
        </style>
    </head>
    <body>
        <p>把很长的一段文本中溢出的内容隐藏,出现省略号</p>
    </body>
</html>
复制代码

 

运行效果如图所示:

         

 

 

                                                                                                                                                                                                                                                                                  

posted on   心有所信方能行远  阅读(976)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示