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二选一。