《html+css+javascript 标准实例教程(第二版)12.ppt》由会员分享,可在线阅读,更多相关《html+css+javascript 标准实例教程(第二版)12.ppt(36页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 本书编委会 编著实例版实例版第第12章章 字体的设置字体的设置12.1 设置字体font-family12.2 设置字号font-size12.3 设置字体样式font-style12.4 设置字体加粗font-weight12.5 设置字体变体font-variant12.6 组合设置字体属性font12.7 小实例综合设置字体12.8 习题HTML/CSS/JavaScript 标准教程实例版(第2版)HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.1 设置字体设置字体font-family基本语法font-family:字体:字体1,字体,字体2,字体,字
2、体3,;HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.1 设置字体设置字体font-family语法说明 应用font-family属性可以一次定义多个字体,而在浏览器读取字体时,会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第一种字体,则自动读取第二种字体,若第二种字体也找不到,则自动读取第三种字体,这样依次类推。如果定义的所有字体都找不见,则选用计算机系统的默认字体。在定义英文字体时,若英文字体名是由多个单词组成,并且单词之间有空格,那么一定要将字体名用引号(单引号或双引号)引起来。如:font-family:“Courier New”,定
3、义了一个字体为Courier New。HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.1 设置字体设置字体font-family实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.1 设置字体设置字体font-family网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号font-size基本语法font-size:绝对尺寸绝对尺寸|关键字关键字|相对尺寸相对尺寸|百分比百分比HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号f
4、ont-size语法说明语法说明 绝对尺寸是指尺寸大小不会随着显示器分辨率的变化而变化,也不会随着显示设备的不同而变化。如用绝对尺寸设置的文字在显示器分辨率为960600和分辨率为1024768下所显示的大小是一样的。HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号font-size语法说明语法说明 使用绝对尺寸设置文字大小的时候一定要加上单位,如果没有加单位,浏览器会默认以px(像素)为单位。绝对尺寸可以使用的单位包括in(英寸)、px(像素)、cm(厘米)、mm(毫米)、pt(点)、pc(皮卡)。最常用的单位还是px(像素)。(1点=1/7
5、2英寸)。HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号font-size语法说明语法说明 相对尺寸是指尺寸大小继承于该元素属性的前一个属性单位值。这里要强调的是,如果是在该元素的font-size属性中使用cm为属性单位,那么将直接继承于父元素的font-size属性,若没有父元素,则参考浏览器的默认字号值。HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号font-size语法说明语法说明 绝对尺寸和相对尺寸也可以使用关键字来定义字号。绝对尺寸的关键字有七个,分别为xx-small(极小)、
6、x-small(较小)、small(小)、medium(标准大小)、large(大)、x-large(较大)、xx-large(极大)。相对尺寸则仅有两个关键字,分别为larger(较大)和smaller(较小)。相对尺寸的larger是指在它的上一个关键字基础上扩大一级,smaller则是在它上一个关键字基础上缩小一级。HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号font-size语法说明语法说明 百分比是基于父元素中字体的大小为参考值的。HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号f
7、ont-size实例代码实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号font-size接上页接上页HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号font-size网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号font-size实例代码实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.2 设置字号设置字号font-size接上页接上页HTML/CSS/JavaScript 标准教程
8、实例版(第2版)第章1212.2 设置字号设置字号font-size网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.3 设置字体样式设置字体样式font-style基本语法基本语法font-style:normal|italic|obliqueHTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.3 设置字体样式设置字体样式font-style语法说明语法说明HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.3 设置字体样式设置字体样式font-style实例代码实例代码HTML/CSS/Java
9、Script 标准教程实例版(第2版)第章1212.3 设置字体样式设置字体样式font-style接上页接上页HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.4 设置字体加粗设置字体加粗font-weight基本语法基本语法font-weight:normal|bold|bolder|lighter|numberHTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.4 设置字体加粗设置字体加粗font-weight语法说明HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.4 设置字体加粗设置字体加粗font-w
10、eight实例代码实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.4 设置字体加粗设置字体加粗font-weight接上页接上页HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.4 设置字体加粗设置字体加粗font-weight网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.5 设置字体变体设置字体变体font-variant基本语法基本语法font-variant:normal|small-capsHTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.5 设
11、置字体变体设置字体变体font-variant语法说明语法说明 normal表示正常的字体,默认值就为这个字体。small-caps表示英文字体显示为小型的大写字母。HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.5 设置字体变体设置字体变体font-variant实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.5 设置字体变体设置字体变体font-variant网页效果网页效果HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.6 组合设置字体属性组合设置字体属性font基本语法基本语法font:f
12、ont-family|font-size|font-style|font-weight|font-variantHTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.6 组合设置字体属性组合设置字体属性font语法说明语法说明 font属性主要用作不同字体属性的略写,特别是可以定义行高。属性与属性之间一定要用空格间隔开。HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.7 小实例小实例综合设置字体综合设置字体 实例代码实例代码HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.7 小实例小实例综合设置字体综合设置字体 接上页接上页HTML/CSS/JavaScript 标准教程实例版(第2版)第章1212.7 小实例小实例综合设置字体综合设置字体 网页效果网页效果