CSS3文本和字体
CSS3文本阴影 – text-shadow
- 语法:text-shadow: h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊距离)
color(颜色); - 兼容:ie10+ 、firefox3.5+ 、chrome4+ 、safari4+ 、 opera9.5+;
- 注:模糊程度不能是负数,不然会失去效果;
text-outline属性-规定文本轮廓
- 语法:text-ouotline: thickness(宽度值) blur(轮廓描边的模糊程度) color(轮廓的颜色);
- 兼容性:任何浏览器暂时不支持这个属性;
CSS3换行 – word-break
-
规定自动换行的处理方法
-
语法:word-break: normal(正常)、
break-all(允许在单词内换行)、keep-all(只能在半角空格和连字符处换行); -
兼容性:ie5.5+ 、 firefox15+ 、 chrome4+、 safari3.1+ 、 opera15+;
-
注:此属性指定非CJK脚本的断行规则;
-
注:对于中文,normal和break-all区别不大
对于英文,normal和keep-all区别不大,break-all则会拆开单词进行强制断行
CSS3换行 – word-wrap
-
允许长单词或者url地址换行到下一行;
-
语法:word-wrap: normal 、break-word(以断开的文字进行换行);
-
兼容性:ie5.5+ 、 firefox3.5+、 chrome23+ 、 safari6.1+ 、opera12.1+;
text-align-last属性
- 规定如何对其文本的最后一行;
- 语法:text-align-last:
auto – 默认左对齐
left – 左对齐
right – 右对齐
center–居中
justify–两端对齐
strat – 随主体形式
end – 与文章相反设置
initail – 默认和auto
inherit – 继承父元素
text-overflow属性
- 规定当文本溢出包含元素时发生的事情;
- 语法:text-overflow
clip – 溢出部分会修剪掉
ellipsis – 溢出部分会会以省略号表示
string – 只能是火狐支持,表示以我自定义的方式对溢出部分自定义 - 兼容性:ie6+ firefox7+ chrome4+ safari3.1+ opera11.1+(9.0 -o-);
- 注:配合与overflow:hidden一起使用;
@fontface
@fontface{
font-family:<yourwebfontname>: 字体名称
src:<source>[<format>],<source>[<format>]; 字体存放路径,可多个
[font-weight:<字体加粗>]
[font-style:字体样式]
}
兼容性:ie9+、 firefox3.5+ 、chrome4+、safari3.2+、opera10.1+
推荐模板:
@font-face {
font-family: 'myfont'; 自定义名称,要有意义,不准数字
src: url('font/myFont.eot'); 兼容ie9以上版本
src: url('font/myFont.eot?#iefix') format('embedded-opentype'),兼容ie6-8版本
url('font/myFont.ttf') format('truetype'),主要针对手机端浏览器 safari android ios
url('font/myFont.woff') format('woff'),兼容所有浏览器
url('font/myFont.svg#myFont') format('svg');针对ios端开发 legacy ios
font-weight: bold;
font-style: normal;
}