CSS样式学习笔记之字体 文本相关属性

1、字体大小

▍属性名：font-size

▍语法：

div {
     font-size:40px;
}

▍注意点:

1. Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。

2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。

3. 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

2、字体族

▍属性名：font-family

▍语法：

div {
    font-family:"STCaiyun","Microsoft YaHei",sans-serif；
}

▍注意点：

1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。

2. 如果字体名包含空格，必须使用引号包裹起来。

3 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif(衬线字体)或sans-serif(非衬线字体)

4. windows 系统中，默认的字体就是微软雅黑。

3、字体风格

▍属性名：font-style

▍常用值：

1. normal：正常:(默认值)

2. italic：斜体（使用字体自带的斜体效果）

3. oblique：斜体（强制倾斜产生的斜体效果）

实现斜体时，更推荐使用 italic。

▍语法：

div {
    font-style: italic;
}

4、字体粗细

▍属性名：font-weight

▍常用值：

(1)关键词:

1. lighter ：细

2. normal：正常

3. bold：粗

4. bolder：很粗（多数字体不支持）

(2)数值：

1. 100~1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）。

2. 100~300等同于lighter，400~500等同于normal，600及以上等同于 bold。

▍语法：

div {
     font-weight:bold;
}
div {
     font-weight:600;
}

5、字体复合属性

▍属性名：font，可以把上述字体样式合并成一个属性。

▍编写规则：

1. 字体大小、字体族必须都写上。

2. 字体族必须是最后一位、字体大小必须是倒数第二位。

3. 各个属性间用空格隔开。

▍实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font-size 属性。

6、文本颜色

▍属性名：color

▍可选值：

1. 颜色名

2. rgb 或 rgba

3. hex 或 hexa（十六进制）

4. hsl 或 hsla

▍开发中常用的是：rgb/rgba 或 hex/hexa（十六进制）

▍举例：

div {
     color: rgb(112,45,78);
}

7、文本间距

▍字母间距：letter-spacing

▍单词间距：word-spacing（通过空格识别词）

▍属性值为像素（px），正值让间距增大，负值让间距缩小。

8、文本修饰

▍属性名：text-decoration

▍可选值：

1. none：无装饰线(常用)

2. underline：下划线(常用)

3. overline：上划线

4. line-through：删除线

可搭配如下值使用：

1. dotted：虚线

2. wavy：波浪线

3. 也可以指定颜色

▍举例：

a {
  text-decoration：none;
}

9、文本缩进

▍属性名：text-indent

▍属性值：css中的长度单位，例如：px

▍举例：

div {
     text-indent: 40px;
}

10、文本对齐_水平

▍属性名：text-align

▍属性值：left（左对齐默认值）/center（居中对齐）/right（右对齐）

div {
     text-align: center;
}

11、细说font-size

1. 由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。

例如：font-size 设为 40px，最终呈现的文字，可能比 40px 大，也可能比 40px 小。

2. 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都 靠下 一些。

12、文本行高

▍属性名：line-height 

▍可选值：

1. normal：由浏览器根据文字大小决定的一个默认值。

2. 像素（px）。

3. 数字：参考自身 font-size 的倍数（很常用）

4. 百分比：参考自身 font-size 的百分比。

▍备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。

▍举例：

div {
    line-height：60px;
    line-height：1.5;
    line-height：150%;
}

▍行高注意事项：

1. line-height 过小会怎样?-- 文字产生重叠，且最小值是0，不能为负数。

2. line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。

3. line-height 和 height 是什么关系?

• 设置了 height ，那么高度就是 height 的值。

• 不设置 height 的时候，会根据 line-height 计算高度。

▍应用场景：

1. 对于多行文字：控制行与行之间的距离。

2. 对于单行文字：让 height 等于 line-height，可以实现文字垂直居中。

▍备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文

字，不会太影响观感。

13、文本对齐_垂直

▍顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。

▍居中：对于单行文字，让 height=line-height 即可。

▍底部：对于单行文字，目前一个临时的方式：让 line-height = (height×2) - font-size - x。

▍备注：x是根据字体族，动态决定的一个值。

14、常用文本属性

▍属性名：vertical-align

▍作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。

▍常用值：

1. baseline(默认值)：使元素的基线与父元素的基线对齐。

2. top：使元素的顶部与其所在行的顶部对齐。

3. middle ：使元素的中部与父元素的基线加上父元素字母×的一半对齐。

4. bottom：使元素的底部与其所在行的底部对齐。

▍特别注意： vertical-align 不能控制块元素。