10前端css文本和字体

CSS3 文本

1. 文本阴影text-shadow

• 语法 text-shadow:h-shadow v-shadow blur color

  • h-shadow水平方向阴影

  • v-shadow垂直方向阴影

  • blur模糊程度

  • color阴影颜色

2. 文本轮廓text-outline

• 语法 text-outline:thickness blur color

  • 主流浏览器都不支持

  • thickness轮廓粗细

  • blur轮廓模糊半径

  • color轮廓颜色

3. 文本换行word-break

• 语法 word-break:normal|break-all|keep-all

  • normal正常换行

  • break-all单词内换行（如果一个单词过长，自动换行）

  • keep-all只有遇到半角空格‘ ’或者连字符‘-’才换行，其他情况一律不换行

4. 文本换行word-wrap

• 语法 word-wrap:normal|break-all

  • normal正常换行

  • break-all单词内换行（如果一个单词过长或者url过长，自动换行）

5. 最后一行文本格式text-align-last

• 语法 text-align-last:auto|left|right|center|justify|start|end|initid

  • auto自动

  • left|right|center左/右/居中

  • justify两端对齐

  • start|end跟随主流/与主流相反

  • initid默认

6. 文本溢出text-overflow

• 语法 text-overflow:clip|ellipsis|string

  • clip剪断

  • ellipsis省略号代替

  • string替换省略号

CSS3 字体

有些情况，我们不想使用浏览器自带的字体，css可以引入特殊字体文件

• 语法 font-face｛ font-family: src font-wight: font-style: ｝

• 字体格式：ttf|otf|woff|eot|svg

•