0
点赞
收藏
分享

微信扫一扫

CSS#4:字体与文本

RockYoungTalk 2022-01-11 阅读 76

在花样替补摆烂的第二天 居然过上了啃教材的日子

目录

1. 字体

1.1 字体族(font-family)

字体栈

1.2 字体大小(font-size)

特点

绝对单位

相对单位 

rem元素 

1.3 字体样式(font-style) 

 1.4 字体粗细(font-weight)

1.5 字体变化 (font-variant)

1.6 简写

2. 文本

2.1 文本缩进(text-indent) 

2.2 字符间距(letter-spacing)

2.3 单词间距(word-spacing)

2.4 文本装饰(text-decoration) 

2.5 文本对齐(text-align) 

2.6 行高(line-height) 

运用复合值的形式把font-size和line-height写在一起

2.7 文本转换(text-transform) 

2.8 垂直对齐(vertical-align) 

3. Web字体 

3.1 公共字体库   

步骤

3.2 @font-face包  

Font Squirrel(http://www.fontsquirrel.com)

4 网页排版

一个简单又基础的步骤

html实体标点符号 

排版上一些特殊的行内元素

1) q

2) span

首字下沉


1. 字体

1.1 字体族(font-family)

用于设定元素中的文本使用什么字体。

一般流程

  1. 给整个页面设定一种主字体
  2. 对需要不同字体的元素应用font-family

注意

  • 不可以修改在线字体库生成的字体名 

设定body元素的该属性:为整个页面指定字体

特点

  • 可继承属性
  • 不区分大小写

字体栈

以防指定的字体无效而多列出几种后备字体的列表

注意

  • 多于一个单词或有空格的字体名,应加上引号
  • 字体栈的最后一项要指定一个通用字体类 

通用的字体类

  • serif 衬线字体
  • sans-serif 无衬线字体
  • monospace 等宽字体
  • cursive 草书体或手写体
  • fantasy 其他

字体栈1(Verdana)

Verdana的后备用Tahoma最好,因它们的x高度相同:

verdana, tahoma, sans-serif

字体栈2(无衬线)

helvetica, arial, sans-serif

1.2 字体大小(font-size)

设定font-size时其实是在修改默认值。

特点

  • 有默认值
  •  可继承(相对单位)

绝对单位

  • 像素
  • 派卡
  • 英寸

注意:使用绝对单位不会继承祖先元素的字体大小! 

缺点 

  • 在调整页面所有元素的字体大小时需要一个一个修改

优点

  • 祖先元素的字体大小变化时不会出现意外的“连锁反应” 

相对单位 

  • 百分比
  • em
  • rem(根元素的字体大小)

在默认情况下,1em为16像素。

用相对单位设置元素的font-size的情况下,该元素的字体大小要相对于最近的“被设定过字体大小”的祖先元素来确定。

优点

  • 能成比例地改变所有元素的字体大小
  • 在反复修改布局设计的时候,能节省时间

由于今天设备的屏幕尺寸千差万别,相对大小应是首选。

rem元素 

集相对大小和绝对大小的优点于一身的单位。

  • 可以只修改根元素就成比例地调整所有字体大小
  • 避免字体大小逐层复合的连锁反应

1.3 字体样式(font-style) 

  • italic:斜体
  • normal:正体 

 1.4 字体粗细(font-weight)

  • bold:粗体
  • normal:正体 

1.5 字体变化 (font-variant)

  • small-caps:使所有小写英文字母变成小型大写字母
  • normal:正体 

1.6 简写

  1. font-weight、font-style、font-variant

  2. font-size

  3. font-family 

2. 文本

2.1 文本缩进(text-indent) 

该属性设定行内盒子相对于包含元素的起点,一般来说就是左上角。

  • 正号:往右移
  • 负号:往左移

 能够得到首行缩进的效果。

具有可继承性。然而,被继承的缩进值并不是祖先元素中设定的值,而是计算的值

CSS会把文本放在一个只有开头和末尾是封闭着的不可见的盒子里。这个盒子会因为折行而断开。所以我们缩进的其实是这个文本盒子的起点位置。也就是说,文本属性只能应用于这个文本盒子,而不是包含元素的盒子。

2.2 字符间距(letter-spacing)

  • 正号:增大
  • 负号:减小

一定要用相对单位,以便字符间距能随大小同比例变化。

  • 控制字距(letter-spacing):控制文本块中所有字符之间的间距
  • 紧排(keming):只调整两个字符的间距

2.3 单词间距(word-spacing)

调整的只是单词的间距,不影响字符间距。

CSS把任何两边有空白的字符和字符串都视作“单词”。

2.4 文本装饰(text-decoration) 

  • underline 下划线
  • overline 上划线
  • line-through 划掉
  • blink 布灵布灵(很讨厌!)
  • none 无

2.5 文本对齐(text-align) 

  • left 左对齐
  • right 右对齐
  • center 居中
  • justify 两端对齐

2.6 行高(line-height) 

特点

  • 不用指定单位

对于类似标题的一行文本来说,line-height增加的空白就像外边距一样,标题往往有默认行高。

运用复合值的形式把font-size和line-height写在一起

div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

行高是字体大小1.2em的1.4倍。

注意:设定行高时如果使用了绝对单位,将来增大字体有可能导致行与行之间的重叠

2.7 文本转换(text-transform) 

  • uppercase 大写
  • lowercase 小写
  • capitalize 首字母大写
  • none 无

2.8 垂直对齐(vertical-align) 

特点

  • 只影响行内元素 

对于块级元素,必须把其display属性设置为inline。 

该属性最常用于公式或化学分子式的上标和下标。

  • 正值:向上
  • 负值:向下 

3. Web字体 

3.1 公共字体库   

一行代码可以链接多款字体。

3.2 @font-face包  

以这种方式提供的字体,会在使用该字体的页面第一次加载时被浏览器下载并缓存起来,以后就不用下载了。

但是,除了显示网页之外,用户不能将这种字体用于其他用途。

把代码添加到网页中之后,就可以使用font-family以常规方式引用该字体了。引用字体时要使用@font-face规则中font-family属性的值作为字体族的名字。 

4 网页排版

html实体标点符号 

  • &ldquo 左双引号“
  • &rdquo 右双引号”
  • &hellip 省略号……
  • &mdash 破折号——
  • &amp 和号&
  • &lt 小于号 

排版上一些特殊的行内元素

1) q

默认样式是在文本开头和末尾加上引号

2) span

为构造首字下沉效果,首字母都会被包含在该元素里。然而,这种做法对于从内容管理系统中动态取文本的网页并不适用。

首字下沉

  • 紧邻同胞选择符+
  • ::first-letter伪元素

注意:

使用::before和::after的伪元素给引用内容添加引号时使用的是十六进制,在这里不能给content属性设定常规的Html实体,只能使用改写后的十六进制实体值。

举报

相关推荐

0 条评论