字体，字符间距，文本缩进，换行

最新推荐文章于 2022-08-19 17:10:48 发布

qq_51365561

最新推荐文章于 2022-08-19 17:10:48 发布

阅读量254

点赞数 1

本文链接：https://blog.csdn.net/qq_51365561/article/details/118398442

版权

字体

字体：字体就是文字的外在特征。样式，文字的衣服。

文字的诞生：
1. 设计师设计。
2. 字体制作人员制作、修改
3. 技术编码、添加指令
4. 测试：校对、测试
5. 生产包装、上市。
windows的字体放在C:\Windows\Fonts

字体分为：免费使用和商业使用。
字体的组成

我们认为的字体可能不单纯，它不是一个单纯的字体。而是许多字体的变形组成，这些变形用来描述粗体、斜体、正常字体等等
字体的类型

字体、字体族分类：
- 衬线字体，笔画开始、结束的地方有额外装饰笔画粗细有不同的地方。
- 非衬线字体，没有额外的装饰，笔画粗细差不多
- 等宽字体，等宽字体是针对英文而言每个英文字母占据同等的宽度。
  
  i M 占据的是相同的宽度。
- 手写字体
- 奇幻字体

'Fira Code','Anonymous Pro','Source Code Pro Semibold',Consolas, 'Courier New', monospace

字体系列

格式：font-family:value

value指的是字体名或字体族的名字。

__注意： __

常见的中文字体在设置时可以使用宋体、微软雅黑，但是一般我们不这样用，我们用的是他们的英文名字。（中英文对照，见表）
如果你设置的字体包含空格那么我们应该使用引号括起来。
为了保证用户体验，看到的效果是比较好的效果，我们会设置多个，定义了多个字体，每个字体之间使用逗号进行分隔。浏览器根据这个字体列表检索客户端系统中的字体，按照从左到右的顺序进行使用，先找到的就先使用了。如果说到列表最后都没有找到指定的字体那么会使用浏览器默认字体。

字体粗细

格式：font-weight:value

normal，正常字体。
bold，粗体。
bolder，更粗。
lighter，更细。
100_{900，使用100}900作为关键字（因为字体或字体族都映射了9级粗度）

100~900有没有效果要看这个字体族是否安装了各种字体的变体。

有些100\200\300没变化呢，实际上这符合CSS的规范只要一个关键字对应的变形不会比前一个关键字对应变形更细，都是允许的。

通常400等于normal。

bold通常是700。

如果字体、字体族中没有设定粗细、浏览器会自行计算，生成粗细。

字体风格

格式：font-style:value

normal，默认值。
italic，显示成斜体。

字体简写格式

格式：font:style weight size family

__注意： __

style和weight他们的顺序可以颠倒。
size和family他们的值必须写，而且顺序不能颠倒。

字体颜色

格式： color:value

十六进制的值
rgb颜色
rgba颜色
颜色关键字

字体下划线

格式：text-decoration:value

underline，文本的下划线。
none，标准的文本。
overline，上划线
line-through，贯穿线

字符间距

格式：letter-spacing:value

px，像素
em，按照当前字体大小来计算。

元素的显示模式

块级元素（block）
- 独占一行。
- 块状元素可以设置宽度和高度，即使设置了宽度也是独占一行。
- 默认情况下块状元素宽度自动填满父元素宽度。
- 当我自己设置宽度、高度的时候可以比父元素设置的大，也可以比父元素设置的小。只不过我们通常设置的比父元素要小。
常用元素：div、h1~h6、p、ul、ol、form…
内联元素、行内元素（inline）
- 不会自己独占一行，多个相邻的行内元素排列在同一行。一行放不下换行。宽度随着内容的变化而变化。
- 行内元素不能设置宽度和高度。
常用的行内元素：span、b、strong、i、em…
行内块状元素（inline-block）

在内部表现为块状元素，可以设置宽度和高度、在外部排列方式类似于内联元素水平排列。

常用元素：img、表单元素

更改显示类型

格式： display:value

block，显示为块状元素。
inline，显示为内联元素。
inline-block，显示为内联块状元素。
none，隐藏元素。

块-》一行一行内容（inline、inline-block）

文本缩进

格式：text-indent:value

px，像素
em，字体大小

为了应对字体大小变化之后也随之缩进2个字符那我们经常用的是em这个单位。

__注意： __

text-indent，适用于块状元素和行内块状元素。
文本缩进只会影响第一行，其他行不会受到影响。

换行

格式：white-space，用来处理元素内文本是否允许换行。

normal，默认值。CJK文本遇到容器边界自动换行，非CJK文本按照word-break的值决定。

CJK（china，japan，korea）
nowrap，超出容器边界不换行。

格式：word-break:value，用来表明怎么样进行单词内的断句。

none，浏览器根据默认设置来决定。
break-all，如果使用了break-all之后换行会出现在任何字符之间。

隐藏内容

格式：overflow:value

visible，超出元素框的内容是可见的。
hidden，超出元素矿的内容被隐藏。
scroll，多出的内容出现滚动条。
auto，浏览器自己决定，通常具有不确定性。

qq_51365561

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
字体，字符间距，文本缩进，换行

字体字体：字体就是文字的外在特征。样式，文字的衣服。文字的诞生：设计师设计。字体制作人员制作、修改技术编码、添加指令测试：校对、测试生产包装、上市。windows的字体放在C:\Windows\Fonts字体分为：免费使用和商业使用。字体的组成我们认为的字体可能不单纯，它不是一个单纯的字体。而是许多字体的变形组成，这些变形用来描述粗体、斜体、正常字体等等字体的类型字体、字体族分类：衬线字体，笔画开始、结束的地方有额外装饰笔画粗细有不同的地方。非衬线字体，
复制链接

扫一扫