本文共 8287 字,大约阅读时间需要 27 分钟。
CSS3其中一个重要变化就是增加了服务器字体功能,这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题。通过CSS3的服务器字体功能,可以控制浏览器使用服务器包含的字体,这样可以保证即使我们的电脑上没有安装任何字体,也可以呈现出统一的页面。
CSS为控制文本的字体提供了很多的属性,这些字体相属性关的属性主要用于控制文本的字体、颜色、修饰等外观。字体相关属性如下所示:
font | 控制文字的样式、字体粗体、大小等属性。为了更好的进行控制,通常不使用该属性。 |
color | 控制文字的颜色,属性值可以是颜色名、十六进制的颜色值、rgb函数、CSS3提供的HSL颜色值(色相、饱和度、明度) |
font-family | 设置文字的字体,可以设置多个显示字体(以,号隔开)。 |
font-size | 设置文字的字体,可以是相对字体,也可以是绝对字体。支持xx-small、x-smallengthl、small、medium、large、length等属性值 |
font-size-adjust | 用于控制对不同字体的尺寸进行微调,可以指定none(不进行任何调整)。 |
font-stretch | 改变文字横向的拉伸,默认值为normal(表示不拉申),还有两个属性值,narrower(横向压缩)和wider(横向拉伸) |
font-style | 设置文字的风格,是否使用斜体等。属性值:normal、itlic、oblique,设置文字正常、斜体、倾斜字体。 |
font-weight | 设置字体是否加粗,可以用100、200、300、900来控制字体的加粗程度。 |
text-decoration | 用于控制文字是否有修饰线,如下画线等,属性的值有none、blink、underline、line-through、overline,意思分别为无修饰、闪烁、下画线、中画线和上画线等。 |
font-variant | 设置文字的大写字母格式。该属性支持normal、small-caps两个属性,分别代表正常字体、小型的大写字母字体。 |
text-shadow | 设置文字是否有阴影效果。 |
text-transform | 设置文字的大小写。该属性支持none、small-capitalize、uppercase和lowercase,分别代表不转换、手写字母大写、全部大写。全部小写。 |
line-height | 设置字体的行高,即字体最底端与字体内部顶端之间的距离,为负值的行高可以实现阴影效果。 |
letter-spacing | 设置字符之间的间隔,最后一个文字不会受到影响,该属性支持normal和数据+长度单位(如11pt、14px等)两种属性。 |
word-spacing | 设置单词之间的间隔,该属性支持normal和数据+长度单位(如11pt、14px等)两种属性。 |
下面代码写了对上面各种属性进行了示范,页面左边是设置的属性值,右边则是设置后的效果。
字体相关属性设置 color:#888888:测试文字color:red:测试文字font-family:隶书:测试文字font-size:20pt:测试文字font-size:xx-large:测试文字font-stretch:narrower:测试文字font-stretch:wider:测试文字font-style:italic:测试文字font-weight:bold:测试文字font-weight:900:测试文字text-decoration:blink:测试文字text-decoration:underline:测试文字text-decoration:line-through:测试文字font-variant:small-caps :hellotext-transform:uppercase:hellotext-transform:capitalize:helloline-height:30pt:测试文字letter-spacing:5pt:hello worldletter-spacing:15pt:hello worldword-spacing:20pt:hello worldword-spacing:60pt:hello world
字体相关属性提供了一个text-shadow属性,该属性值形如color xoffset yoffset length,或xoffset yoffset radius color。
下面页面代码示范了设置阴影的几个参数的意思:
阴影 text-shadow:red 5px 5px 2px:测试文字
text-shadow:5px 5px 2px(省略阴影颜色):测试文字
text-shadow:-5px -5px 2px gray(向左上角投影):测试文字
text-shadow:-5px 5px 2px gray(向左下角投影):测试文字
text-shadow:5px -5px 2px gray(向右上角投影):测试文字
text-shadow:5px 5px 2px gray(向右下角投影):测试文字
text-shadow:15px 15px 2px gray(向右下角投影、更大偏移距):测试文字
text-shadow:5px 5px 10px gray(模糊半径增加,模糊程度加深):测试文字
如果希望为文字添加多个阴影,则可以为text-shadow属性设置几组阴影,多组阴影之间用逗号隔开,例如下面代码所示:
多个阴影 text-shadow:5px 5px 2px #222, 30px 30px 2px #555 , 50px 50px 2px #888(多个阴影):测试文字
对于西方文字来说,相同字号、不同字体的字母也是不同的,例如以下代码:
text-size-adjust Our domain is www.crazyit.orgOur domain is www.crazyit.orgOur domain is www.crazyit.org
CSS2已经提供了多种颜色表示的方法,如字符串形式的颜色名、十六进制的颜色值等。但CSS2不允许为颜色设置透明度,因此显得不够完善。CSS则提供了更多的颜色表示方法,总结起来有如下几种:
用颜色名表示,例如white(白色)、red(红色)、blue(蓝色)等。
下面代码示范了各种颜色表示的方法:
颜色表示方式 background-color:graybackground-color:#aaa;background-color:#ffff00;background-color:rgb(255, 0 , 255);background-color:hsl(120, 80%, 50%);
文本相关属性用于控制整个段、整个<div>元素内文本的显示效果,包括文本的缩进、段落内文字的对齐等显示方式。
1.text-indent:用于设置段落文本的缩进,默认值为0.被另外一个元素(如br)断开的元素不能应用本属性。
2.text-overflow:用于控制溢出文本的出来方法。该属性支持如下两个属性值。
3.vertical-align:用于设置目标元素内容的垂直对齐方式,通常有顶端对齐,底对齐等方式。
4.text-align:用于设置目标元素中文本的水平对齐方式。该属性支持left、right、center(居中对齐)、justify(两端对齐)。
5.direction:用于设置文本流入的方向,该属性的合法值有ltr(从左向右)和rtl(从右向左)。该属性不会影响拉丁文字母、数字字符,它们总是以ltr值呈现。但此属性会作用于拉丁文的标点符号。
6.white-space:用于设置目标元素对文本内容中空白的处理方式。
7.word-break:用于设置目标元素中文本内容的换行方式。
8.word-wrap:用于设置目标元素中文本内容的换行方式。
下面的代码示范了上面我们常用到的文本相关属性:
文本相关属性设置 text-indent:20pt测试文字text-indent:40pt测试文字text-align:center测试文字text-align:right测试文字direction:rtl测试文字direction:ltr测试文字text-overflow:clip text-overflow:ellipsis
white-space用于控制HTML元素对元素文本中空白的处理方式。该属性支持以下几个属性值:
下面代码将示范了white-space属性对空白的处理行为:
white-space white-space:normalThe root interface in the collection hierarchy.white-space:preThe root interface in the collection hierarchy.white-space:nowrapThe root interface in the collection hierarchy.white-space:pre-wrapThe root interface in the collection hierarchy.white-space:pre-lineThe root interface in the collection hierarchy.
当HTML元素不足以显示它里面的文本时,浏览器将会自动换行显示它里面的所有文本。浏览器换行规则:对于西方文字来说,浏览器只会在半角空格、连字符的地方换行;对于中文来说,浏览器可以在任何一个中文字符后换行。如果希望改变浏览器的默认换行行为,自己有需求的话,可以看看如下属性值:
如果想要让浏览器在西方文字的单词中间换行,则可将word-break属性设置为break-all。下面代码将示范了word-break属性功能:
word-break word-break:keep-allThe root interface in the collection hierarchy.word-break:break-allThe root interface in the collection hierarchy.
有时候文本内容包含了特别长的单词或特别长的URL地址——URL地址既不包含半角空格,也不包含连字符,因此当浏览器窗口比较窄时,将会出现滚动条。如果需要改变默认行为,就需要通过word-wrap属性设置,该属性有如下两个值:
为了让浏览器控制文本的内容在长单词、URL地址中间换行,可以通过word-wrap属性,设置为brea-word即可,如下所示:
word-wrap word-wrap:normalOur domain is http://www.crazyit.orgword-wrap:break-wordOur domain is http://www.crazyit.org
注意:work-break和work-wrap属性的作用是不同的。work-break设置为break-all,可以让元素内每一行文本最后一个单词自动换行;work-wrap则会尽量让长单词、URL地址不要换行。即使设置为break-word,也会尽量让其单独占一行,只有当一行文本不足以显示这个长单词、URL地址时,才会在其中间换行。
在CSS3以前,我们只能使用最普通的字体,有些网页甚至根本不会设置字体,这是因为网页上使用某种字体后,除非我们电脑上存在这种字体,否则显示将无效。CSS3的出现改变了这种现状,CSS3允许使用服务器字体,如果客户端没有安装这种字体,客户端将会自动去下载这种字体。
使用服务器字体很简单,只要使用@font-face定义服务器字体即可。大家是不是感觉很简单,@font-face语法如下:
@font-face { font-family: name; src: url(url) format(fontformat); sRules}
font-familt:服务器字体的名称,可以随意定义。src:通过URL指定该字体文件的路径,format指的是字体的格式。为了使用服务器字体,步骤如下(需要字体文件的可以网上下载也可以在我的资源库中下载):
服务器字体 Our domain is http://www.baidu.com
我们在网页上除了定义字体外,还会定义粗体、斜体。但在使用服务器字体时,需要为粗体、斜体、粗斜体使用不同的字体文件。在@font-face中增加了font-weight,font-style等定义(字体文件需要下载)。
服务器字体 Our domain is http://www.baidu.comOur domain is http://www.baidu.comOur domain is http://www.baidu.comOur domain is http://www.baidu.com
虽然CSS3提供了服务器字体功能,但也不能动不动上来就用服务器字体,因为它需要从远处服务器下载字体文件,效率感觉并不好。所以尽量使用客户端字体,当客户端不存在这种字体时,才考虑用服务器字体进行代替(url可以是本地也可以是网页服务器上的文件)。
优先使用客户端字体 Our domain is http://www.baidu.com
指定src属性时,优先使用local("Goudy Stout")客户端字体,当不存在时, url("Blazed.ttf")才会去替代它。
CSS3服务字体文件可以在我的资源库中进行 下载:
--------------------------------------------------学会选择和坚持,就赢得了人生的主动权。--------------------------------------------------
转载地址:http://sypti.baihongyu.com/