CSS3
1.文本
1.1 text-shadow文本阴影
语法:
text-shadow:横向偏移,垂直偏移,向外模糊度,颜色;
p{
text-shadow:10px 10px 3px #f00;
}
横向,垂直正负值皆可用,模糊度值不能是负值。
兼容:IE10+,FireFox3.5+,Chrome4+,safari4+,opera9.5+
1.2text-outline文本轮廓
语法:
text-outline:轮廓宽度 模糊度 颜色;
兼容:所有主流浏览器都不支持 text-outline 属性。
1.3 word-break换行(自动换行的处理方法)
p{
word-break:keep-all;
}
值 | 意 |
---|---|
normal | 浏览器默认 |
break-all | 英文下强行拆词换行(中卫和默认效果一样) |
keep-all | 半角字符和连空格下换行(中文下,一行内最后一个符号处换行) |
兼容:IE5.5+,FireFox15+,Chrome4+,safari3.1+,opera15+
1.4 word-wrap换行(用于长单词或URL)
值 | 意 |
---|---|
normal | 浏览器默认(有断点换行) |
break-word | 断开换行 |
兼容:IE5.5+,FireFox3.5+,Chrome23+,safari6.1+,opera12.1+
中文无效!!
1.5text-align-last属性(最后行对齐方法)
值 | 意 |
---|---|
auto | 自动 |
left | 左对齐 |
right | 右对齐 |
center | 居中 |
justify | 两端对齐 |
start | 文本左对齐,则左对齐。(意思和text-align一样) |
end | 文本左对齐,则右对齐。(意思和text-align相反) |
initial | 默认值 |
inherit | 继承 |
兼容:IE兼容,Firefox需要加前缀"moz",chrom50+
IE和Firefox 需要给标签设置text-align:justify;
1.6text-overflow属性(文本溢出)
值 | 意 |
---|---|
clip | 直接裁剪掉 |
ellipsis | 后边显示…裁剪 |
string | 自定义符号(只有火狐才能使用) |
兼容:IE6.0+,FireFox7+,Chrome4.0+,safari3.1+,opera11.1+(9.0-o-)
注:overflow:hidden,设置内容溢出隐藏才能用该属性
2.字体
自定义字体
语法:
@font-face{
font-family:自定义名字;
src:(‘文本路径’)format(‘格式’),
src:(‘文本路径’)format(‘格式’),
src:(‘文本路径’)format(‘格式’);
font-weight:字体粗细;
font-style:字体样式;
}
兼容:IE9+,FireFox3.5+,Chrome4.0+,safari3.2+,opera10+
字体格式
TrueType(.ttf):windows和Max比较常见,是一种RAW格式,不为网站优化
兼容:IE9+,FireFox3.5+,Chrome4.0+,safari3+,opera10+,IOS Mobile Safari4.2+
OpenType(.oft):被认为是一种原始的字体格式,内置在TrueType的基础上,所以也提供更多的功能
兼容:IE不兼容,FireFox3.5+,Chrome4.0+,safari3+,opera10+,IOS Mobile Safari4.2+
Web Open Font Format (.woff):是web字体中最佳的格式。他是一个开放的TrueType/OpenType的压缩版本,同时支持元素数据包的分离。
兼容:IE9+,FireFox3.5+,Chrome6.0+,safari3.6+,opera11+ 不兼容ios手机
Embedded Open Type(.eot):IE专用字体, 可以从TrueType创建此格式
兼容:仅IE4+
SVG(.svg):svg字体是基于SVG字体渲染的一种格式
兼容:IE不兼容,FireFox不兼容,Chrome4.0+,safari3.1+,opera10+ IOS Mobile Safari3.2+
简便网址
Fontsquirrel
https://www.fontsquirrel.com/tools/webfont-generator