Web前端开发技术与实践 第9章：文字样式 阮晓龙 /

Presentation on theme: "Web前端开发技术与实践 第9章：文字样式 阮晓龙 /"— Presentation transcript:

1 Web前端开发技术与实践 第9章：文字样式 阮晓龙 13938213680 / rxl@hactcm.edu.cn
河南中医学院管理信息工程学科 河南中医学院网络信息中心

2 本章主要内容 文本样式 字体样式 文本效果 使用服务器端字体 案例：诗歌排版 案例：使用服务器端字体实现网站图标

3 1.文本样式 由于Web是HTML文档的集合体，有动态的元素、静态的元素、功能展示的元素，它们的呈现不能够是杂乱无章的，这就需要对各种文字样式进行排版。 排版是对文本样式进行各种操作（例如改变文本的颜色、字符间距、行高、文字对齐方式等，并需实现文本缩进、字体装饰等内容）。 CSS的文字样式可以通过各种属性的综合使用实现各种样式的文字排版。

4 1.文本样式 1.1属性

5 1.文本样式 color属性规定文本的颜色。 这个颜色还会应用到元素的所有边框，除非被border-color或另外某个边框颜色属性覆盖。

6 现场演示： 案例9-01：文本颜色

7 1.文本样式 text-indent属性规定文本块中首行文本的缩进。
该属性值可以为像素值、百分比或相对值em，也可以为正值或负值，如果使用负值，那么首行会被缩进到左边。

8 现场演示： 案例9-02：文本缩进

9 1.文本样式 line-hight属性用来设置行间的距离（行高）。
1.4行高：line-height line-hight属性用来设置行间的距离（行高）。 line-height与font-size的计算值之差在CSS中成为“行间距”，将其值分为两半，分别加到一个文本行内容的顶部和底部，其中可以包含这些内容的最小框就是行框。

10 现场演示： 案例9-03：行高

11 1.文本样式 letter-spacing属性用来定义字符间的空白大小（字符间距）。
该属性定义了在文本字符框之间插入多少空间，由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔，normal就相当于值为0。

12 现场演示： 案例9-04：字母间隔

13 1.文本样式 text-align属性规定元素中文本的水平对齐方式。 该属性通过指定行框与某点对齐，来设置块级元素内文本的水平对齐方式。

14 现场演示： 案例9-05：水平对齐

15 1.文本样式 text-decoration属性规定添加到文本的修饰，修饰的颜色由“color”属性设置。

16 现场演示： 案例9-06：文本装饰

17 1.文本样式 text-transform属性用来对文本的大小写进行转换处理。 该属性会改变元素中的字母大小写，而不管源文本的大小写。
如果值为capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于浏览器如何识别出各个“词”。

18 现场演示： 案例9-07：字符转换

19 1.文本样式 white-space属性设置如何处理元素内的空白。
该属性声明建立布局过程中如何处理元素中的空白符，其中值pre-wrap和pre-line是CSS2.1中新增的。

20 现场演示： 案例9-08：元素空白处理

21 1.文本样式 word-spacing属性用来增加或减少单词（英文）间的空白（即字间隔）。
针对这个属性，“字”定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔，normal就等同于设置为0，允许指定负长度值，这会让字之间挤得更紧。

22 现场演示： 案例9-09：文字间隔

23 1.文本样式 1.11首字下沉：:first-letter first-letter属性用来实现文本首字下沉效果，此伪对象仅作用于块对象。

24 现场演示： 案例9-10：首字下沉

25 2.字体样式 文字是网页中最重要的设计元素之一，同时也是网站信息传递给用户的主要载体。
2.1什么是字体 文字是网页中最重要的设计元素之一，同时也是网站信息传递给用户的主要载体。 在网页设计中，字体是文字的外在形式特征，一些设计师为了凸显不同的设计效果，往往选择不同样式的字体来进行视觉效果设计。

26 2.字体样式 字体从商业角度划分，分为收费字体和免费字体两大类。
2.1什么是字体 字体从商业角度划分，分为收费字体和免费字体两大类。 例如在日常生活中常用到的方正系列字体，从方正字库官网（ 免费字体： 包括方正黑体、方正书宋、方正仿宋、方正楷体。

27 2.字体样式 字体从商业角度划分，分为收费字体和免费字体两大类。 基础字体： 精选字体：
2.1什么是字体 字体从商业角度划分，分为收费字体和免费字体两大类。 基础字体： 包括方正超粗黑体、方正宋黑体、方正大黑体、方正细黑一体、方正中等线体、方正细等线体、方正粗圆体、方正准圆体、方正细圆体、方正报宋体、方正宋三体、方正宋一体、方正大标宋体、方正小标宋体、方正彩云体、方正琥珀体、方正隶变体、方正隶书体、方正魏碑体、方正行楷体、方正姚体、方正综艺体。 精选字体： 包括免费字体、基础字体类以外的其它全部方正字体。如方正兰亭黑系列、博雅宋系列、正黑系列、倩体系列等。 注：基础字体和精选字体如需使用，需要购买方正字库授权。

28 2.字体样式 2.2属性

29 2.字体样式 font-family规定元素的字体系列。 font-family可以把多个字体名称作为一个“回退”机制。
在CSS中，有两种不同类型的字体系列。 通用字体系列：拥有相似外观的字体系统组合。 特定字体系列：具体的字体系列（如黑体、微软雅黑等）。 除了各种特定的字体系列外，CSS定义了5种通用字体系列，分别是Serif字体、Sans-serif字体、Monospace字体、Cursive字体、Fantasy字体。

30 现场演示： 案例9-11：字体系列

31 2.字体样式 font-size属性用来定义文本的大小。 该属性值可以为绝对值或相对值。
绝对值是将文本设置为指定的大小，此时不允许用户在所有浏览器中改变文本大小（不利于可用性），绝对大小在确定了输出的物理尺寸时很有用。 相对值是相对于周围的元素来设置大小，允许用户在浏览器改变文本大小。

32 现场演示： 案例9-12：字体大小

33 2.字体样式 2.5字体加粗：font-weight font-weight属性用来定义字体的粗细。

34 现场演示： 案例9-13：字体加粗

35 2.字体样式 font-style属性用来定义字体的风格，该属性值有三种：normal、italic、oblique。
italic：定义文本斜体显示。斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。 oblique：定义文本倾斜显示。倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

36 现场演示： 案例9-14：字体风格

37 3.文本效果 3.1 CSS3新增文本属性

38 3.文本效果 在网页开发过程中，可能会遇到内容溢出而导致网页变形的情况，通常采用以下两种方法解决：
3.2文本溢出：text-overflow 在网页开发过程中，可能会遇到内容溢出而导致网页变形的情况，通常采用以下两种方法解决： 通过JavaScript截取字符串。 网站后台程序截取一定的字符串将超出宽度的内容以省略号（…）显示。 上述的两种方法都有其不足之处，如中英文计算字符长度的问题，会导致截取字符串长度无法控制，从而降低程序的通用性。

39 3.文本效果 3.2文本溢出：text-overflow CSS3新增了text-ovreflow属性，使用该属性可快速地解决内容溢出问题。

40 现场演示： 案例9-15：溢出文本

41 3.文本效果 text-shadow属性用来给页面上的文字添加阴影效果。

42 现场演示： 案例9-16：文字阴影

43 3.文本效果 浏览器自身具有让文字自动换行的功能，在浏览器中显示文本的时候，会让文本在浏览器或div元素的右端自动实现换行。
3.4文本换行 浏览器自身具有让文字自动换行的功能，在浏览器中显示文本的时候，会让文本在浏览器或div元素的右端自动实现换行。 对于西方文字来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词中间突然换行，因此，浏览器不能够给较长的单词自动换行。 对于中文来说，浏览器可以在任何一个中文文字后面进行换行。

44 3.文本效果 3.4文本换行 在CSS3中，word-warp属性可以指定实现长单词与URL地址的自动换行。该属性值有两种：normal和break-word。 normal：默认值，表示只允许在断字点换行。 break-word：指定长单词或URL地址可以自动换行。 在CSS3中，word-break属性可以让浏览器实现在任意位置的换行。该属性值有三种：normal、keep-all和break-word。 normal：默认值，使用浏览器默认的换行规则。 break-all：允许在单词内换行。 keep-all：只能在半角空格或连字符处换行。

45 现场演示： 案例9-17：内容换行 案例9-18：词内换行

46 4.使用服务器端字体 在CSS3之前，页面文字所使用的字体，必须为用户计算机已经安装且能够正常使用的字体。
如果页面中指定了一种字体，而该字体用户计算机上没有安装，则该字体就无法正常显示。用户在浏览页面时，该字体会使用默认字体替代显示。

47 现场演示： 案例9-19：不使用服务器端字体 案例9-20：使用服务器端字体

48 5.案例：诗歌排版 CSS中文字样式的定义，实现了对页面中字体、段落的综合排版。
本案例通过中英文对照的诗歌排版，综合演示文字样式的属性，方便Web前端开发者了解使用文字排版。

49 现场演示： 案例9-21：诗歌排版

50 6.案例：使用服务器端字体实现网站图标 CSS3新增加了服务器字体的文字样式，通过服务器字体可以实现一些非常规字体在Web前端开发中的使用，极大的丰富了Web前端中字体的展示效果。 服务器字体的出现也为Web前端开发中图标的处理提供了新的方法，Web前端开发者可以通过使用服务器字体设置页面中的小图标，统一使用。

51 现场演示： 案例9-22：使用服务器端字体实现网站图标

52 Thanks.