4-5、CSS3文本与字体

4-5、CSS3文本与字体

文本阴影：

阴影文本：
text-shadow : h-shadow | v-shadow | blur | color;
水平偏移、竖直偏移、模糊距离、颜色
注意：这里的颜色可以使用rgba，进行半透明处理。

文本轮廓：
text-outline : thickness | blur | color ;
宽度值、模糊距离、颜色
很遗憾，兼容性上如今主流浏览器都不支持。

自动换行的处理方法：
word-break : normal | break-all | keep-all ;
三个值分别是：正常的、所有地方、半角空格或者连字符地方换行。
注意，keep-all 在中文的时候容易产生不易调整的效果，尽量不要使用。
例子：

允许长单词或URL地址换行到下一行。
word-wrap : normal | break-word ;
两个值：默认、断开。
注意：只针对长单词或URL地址，对中文不起效果。
例子：

规定如何对齐文本的最后一行：
text-align-last : auto | left | right | center | justify |start | end | initial | inherit;
默认值、向左对其、向右对齐、居中对齐、两端对齐、开头对齐、与开头相反对齐、设置默认值、父元素对齐方式。
只有IE和谷歌50+支持，火狐需要加上-moz 。

当文本溢出包含元素时，怎么处理：
text-overflow : clip | ellopsis | string ;
修剪文本、修剪跟个… 、自定义修剪后显示什么（最后一个只有火狐兼容）

这里在使用的时候，得先加上overflow:hidden;溢出隐藏。

---

字体：

@font-face

格式：

svg格式IE和火狐不兼容。

---

模板：

写的时候把模板放进去，直接改。

如何获取字体

https://www.fontsquirrel.com/tools/webfont-generator
下载一个格式的字体，上传上去之后，转换成各种需要的字体。
红色勾选上，上方选第三个，然后把需要的字体选出来就可以了，SVG、EOT Compressed二选一。