CSS学习--文本
文本
字体的属性也可以通过 font 的简写方式来设置 . 这些是按照以下顺序来写的： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family
在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
引入外部字体
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
<style>
p{
font-family: 'Rock Salt', cursive;
}
</style>
文本颜色
p{color:red;}
文本修饰
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness
text-decoration-line: none | underline | overline | line-through;
text-decoration-color: currentColor;
text-decoration-style: solid | double | dotted | dashed | wavy | none;
text-decoration-thickness: auto | from-font | length | percentage;
字体种类
font-family: Helvetica, Arial, sans-serif;
/* @font-face块，它指定要下载的字体文件 */
@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}
font-family: "myFont";
@font-face
用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
正常粗细的字采用字体Times New Roman，粗体字采用Consolas。
@font-face {
font-family: myFirstFont;
src: local("Times New Roman");
font-weight:normal;
}
@font-face {
font-family: myFirstFont;
src: local(Consolas);
font-weight:bold;
}
| 名称 | 定义 | 示例 |
|---|---|---|
| serif | 有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中） | <p style="font-family:serif;">My big red elephant</p> |
| sans-serif | 没有衬线的字体。 | <p style="font-family:sans-serif;">My big red elephant</p> |
| monospace | 每个字符具有相同宽度的字体，通常用于代码列表。 | <p style="font-family:monospace;">My big red elephant</p> |
| cursive | 用于模拟笔迹的字体，具有流动的连接笔画。 | <p style="font-family:cursive;">My big red elephant</p> |
| fantasy | 用来装饰的字体 | <p style="font-family:fantasy;">My big red elephant</p> |
字体大小
font-size: 10px;
font-size: 1rem;字体样式
font-style: normal | italic | oblique(倾斜);字体粗细
font-weight: normal(400) | bold(700) | lighter | border | <number>;
字体阴影
text-shadow: h-offset v-offset blur color;文本的转换
text-transform: capitalize | uppercase | lowercase | none;
| 值 | 描述 |
|---|---|
| capitalize | 单词大写开头 |
| uppercase | 全部大写 |
| lowercase | 全部小写 |
| none | 默认显示 |
文本对齐
text-align: left | center | right | justify;
justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。可以考虑一起使用别的东西，比如 hyphens，打破一些更长的词语。
hyphens: none | manual | auto;
| 值 | 描述 |
|---|---|
| none | 即使单词中有换行符，也不会换行，只会在空白处换行 |
| manual | 只有单词中有建议换行符才会换行，即插入软连字符或存在硬连字符 |
| auto | 浏览器在适当的位置自动插入连字符换行 |
行高
line-height: length | <number>;
| 值 | 描述 |
|---|---|
| length | 例如：2px; |
<number> |
例如：1.5；无单位的值乘以font-size来设置行高 |
字母和单词间距
letter-spacing: 2px;
word-spacing: 4px;
文本伪元素
::first-letter
选中元素文本的第一个字母
::first-line
选中元素文本的第一行
::selection
当前光标双击选中的文本
只有一小部分CSS属性可以用于::selection 选择器：
- color
- background-color
- cursor
- caret-color
- outline and its longhands
- text-decoration and its associated properties
- text-emphasis-color (en-US)
- text-shadow
文本布局
首行缩进
text-indent: length | percentage
文本溢出
text-overflow: clip(截断) | ellipsis (...) | <string>;
/* Not supported in most browsers */
text-overflow: '---';
处理元素空白
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;
单词换行
word-break: normal | break-all | keep-all | break-word;
| 值 | 描述 |
|---|---|
| normal | 默认断行 |
| break-all | 匹配盒子宽度来截断单词，即使单词长度小于盒子宽度 |
| keep-all | 保持所有单词的长度不截断，中/日/韩文不截断 |
| break-word | 截断超过盒子宽度的单词 |
溢出换行
overflow-wrap: normal | break-word ;
| 值 | 描述 |
|---|---|
| normal | 单词间空格换行（会溢出） |
| break-word | 截断超过盒子宽度的单词 |
<!--
一般使用overflow-wrap: break-word ;而不使用word-break: break-word;
-->
文本方向
direction: ltr(左至右) | rtl;
启用连字符
hyphens: none | manual | auto;
| 值 | 描述 |
|---|---|
| none | 即使单词中有换行符，也不会换行，只会在空白处换行 |
| manual | 只有单词中有建议换行符才会换行，即插入软连字符或存在硬连字符 |
| auto | 浏览器在适当的位置自动插入连字符换行 |
换行规则
line-break: auto | loose | normal | strict | anywhere;
末行对齐方式
text-align-last: auto(text-align) | start(decoration) | end | left | right | center | justify;
字符方向
仅影响纵向模式（当 writing-mode 的值不是horizontal-tb）下的文本。
text-orientation: mixed(文字旋转，垂直布局) | upright(水平布局) | sideways(文字旋转，水平布局) | sideways-right(sideways的别名) | use-glyph-orientation(svg);
