文字排版之font的使用

2024-04-27 15:14:09

字体：大中小

来源：转载

供稿：网友

1.10.1 字体大小设置font-size （1em=16px）

其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

一般页面中：12px 14px 12cm

1em

1.10.2 设置字体font-family

使用font-family设置字体时，需要注意以下几点：

Ø 各种字体之间必须使用英文状态下的逗号隔开。

Ø 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。

Ø 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

Ø 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

10.3 字体系列

衬线体：字体有一些修饰的东西，让字体变的美观。

非衬线体：没有修饰。

font-famliy: tahoma,arial,'Hiragino Sans GB',/5b8b/4f53,sans-serif;

v 前面的字体都查找失败后，在系统中找一种sans-serif字体作为默认字体。

注意顺序，如果把sans-serif放前面去，后面的都失效了。

1.10.4 设置字体颜色通过color属性可以设置字体的颜色。Color: red;建议最好使用十六进制的方式来写

1.10.5 设置字符的间距letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。可以设置连续汉字（汉字间没有空格）的间距，也可以设置英文字母之间的间距。letter-spacing: 10px;

1.10.6 设置单词间距Word-spacing属性用于定义英文单词之间的间距。也可以设置汉字中出现断字的距离（比如：文字间出现空格等）。

1.10.7 玩转行高行高的CSS定义：行高是两行文本基线的距离。实际上就是：文本的高度+一倍的行距。一行文本的高度正好是： 0.5倍行距+ 文本的高度 + 0.5倍行距四线： 文字顶端的线，称为顶线。 中线：穿过x中心的线为中线。 小写X字母底部的线为基线。 文字底部的线为底线。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>27行高的练习</title><style>* {padding: 0; margin: 0;}p.demo {height: 100px; /*这里的height是块状标签p的高度*/line-height: 100px; /*这里的height是块状标签p中文本的行高的高度，包括行距和文本自身的高度*/text-align: center;font-size: 40px;background-color: silver;}.wrap {font: 16px "黑体";background-color: green;}.wrap p {background-color: red;/*font: 20px/1.5em "宋体"; */ /* 此时行高是：30px= 20*1.5 *//*font: 20px/1.5 "宋体"; */font: 20px/40px "宋体";/*

						20px 是字体大小，40px是行高大小						font:20px/40px 等于 font-size:20px;line-height:40px; 那么此时行距是40-20=20px						但这么写有时候兼容性不太好，虽然第二种写法代码量比较多，但比较稳定，建议还是用第二种							写法*/}</style></head><body><p class="demo">传智播客前端与移动开发学院</p><div class="wrap"><div>我是父div的文本内容</div> <p>我是子段落标签的文本</p>我是父div的文本内容</div></body></html>
1.10.8 text-decoration:文本装饰text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：<s>删除线</s>none：没有装饰（正常文本默认值）。underline：下划线。overline：上划线。line-through：删除线
1.10.9 text-align:水平对齐方式text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐center：居中对齐1.10.10 text-indent:首行缩进text-indent属性用于设置段落首行文本的缩进，只能设置于块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。1.10.11 空白符的处理：Normal：正常的显示，如果宽度不够进行折行显示。Nowrap：即使超过盒子的宽度，文本也不进行换行显示。PRe：写html代码的时候是什么样式的，显示就显示成什么样的。
关于自动换行的处理
<!DOCTYPE html>
<html lang="en">
<head>
      <metacharset="UTF-8">
      <title>自动换行的处理</title>
      <style>
           div {
                 border: 1pxsolid red;
                 background-color:blue;
                 width: 100px;
                 height: 400px;
                 color: #fff;
 
                 /*word-break:break-all; */  /*可以把一个单词放到两行中，充分利用行的空间*/
                 word-break:keep-all;
           }
      </style>
</head>
<body>
      <div>
           I  am itcast teacher theather theather theather
           http://www.itcast.cn/i/id/ljljljj
      </div>
</body>
</html>