CSS3 文本阴影
text-shadow 属性
应用于阴影文本
语法
text-shadow:h-shadow v-shadow blur color
text-outline 属性
规定文本轮廓
语法
text-outline:thickness(轮廓粗细) blur color
兼容性
任何主流浏览器都不支持 text-outline 属性
CSS3 换行
word-break 属性
规定自动换行的处理方法
语法
word-break:normal | break-all | keep-all
word-wrap 属性
允许长单词或 URL 地址换行到下一行,只针对英文
语法
word-wrap:normal | break-word
CSS3 新文本属性
text-align-last 属性
规定如何对齐文本最后一行
语法
text-align-last:auto | left | right | center | justify | start | end | initial | inherit
兼容性
只有 IE 支持,火狐浏览器要加上前缀
注意
text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用
text-overflow 属性
规定当文本溢出包含元素时发生的事情
语法
text-overflow:clip | ellipsis | string
注意
在写 text-overflow 时,一定要在前面写上
overflow:hidden
string 属性值只有在火狐浏览器中兼容
@font-face
语法规则
@font-face{
font-family: <YourWebFontName>; //字体名称,必填
src: <source>[<format>][<source>[<format>]]*;//字体存放路径,可多个,必填
[font-weight: <weight>]; //字体粗细,选填
[font-style: <style>]; //字体样式,选填
}
取值规则
YourWebFontName
自定义的字体名称,他将被引用到 Web 元素中的 font-family
source
自定义的字体的存放路径,可以是相对路径也可以是绝对路径(建议用相对路径)
format
自定义字体的格式,主要用来帮助浏览器识别
weight 和 style
粗体和斜体
字体格式
TrueType(.tff)格式:
.ttf 字体是 Windows 和 Mac 的最常见的字体,是一种 RAW 格式,因此他不为网站优化
可以用在手机端
OpenType(.otf)格式
.otf 字体被认为是一种原始的字体格式,其内置在 TureType 的基础上,所以也提供了更多的功能
可以用于手机端
Web Open Font Format(.woff)格式:
.woff 字体是 Web 字体中最佳格式,他是一个开放的 TrueType / OpenType 的压缩版本,同时也支持元数据包的分离
不能用于手机端
Embedded Open Type(.eot)格式:
.eot 字体是 IE 专用字体,可以从 TrueType 创建此格式字体
只有 IE 可以兼容
SVG(.svg)格式:
.svg 字体是基于 SVG 字体渲染的一种格式
字体的应用
overflow 属性
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。