css3文本和字体

发表于 | 分类于
本文字数： 1.5k | 阅读时长 ≈ 1 分钟

本篇博客主要介绍CSS3文本效果和字体。

liuyifei

CSS3文本效果

CSS3包含多个新的文本特性。在本篇博客中主要讲解：text-shadow和word-wrap属性。

浏览器支持

Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。

所有主流浏览器都支持 word-wrap 属性。

注释：Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性。

文本阴影

text-shadow属性应用于阴影文本

text-shadow: 水平偏移 竖直偏移 模糊距离 颜色

1
2
3
h1{
	text-shadow: 5px 5px 5px #FF0000;
}

东吴赤乌白醋维稳成本v我IC不遏必u荣誉本人我把蹙额被称为i不错

自动换行

work-break属性：规定非中日韩文本的自动换行规则。

这个属性对英文的兼容性比较好。

word-break: normal|break-all|keep-all;
normal：使用浏览器默认的换行规则。
break-all：允许在单词内换行。
keep-all：只能在半角空格或连字符处换行。

word-wrap属性：允许长单词或 URL 地址换行到下一行。

word-wrap属性中日韩文本方块字不起效果。

word-wrap: normal|break-word;
normal：只在允许的断字点换行（浏览器保持默认处理）。
break-word：在长单词或 URL 地址内部进行换行。

text-align-last属性

text-align-last：设置如何对齐最后一行或紧挨着强制换行符之前的行。

text-align-last：auto| left| right| center| justity（两端对齐)|….

兼容性不咋地。

text-overflow 属性

text-overflow 属性规定当文本溢出包含元素时发生的事情。

text-overflow: clip|ellipsis|string;
clip：修剪文本。
ellipsis：显示省略符号来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。（此属性兼容性不太好）

CSS3字体

本部分主要讲解@font-face的语法规则，取值说明，字体格式和字体的应用。

1
2
3
4
5
6
7
8
9
10
11
@font-face
{
	font-family: <YourWenFontName>;/*myfont*/
	src: <source>/*url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); */
	font-weight:<weight>;
    font-style: <style>
}
div .demo{
    font-family: myfont;
}

font-family:name 必需。规定字体的名称。

src:URL 必需。定义字体文件的 URL。

font-style:normal,italic(斜体）,oblique（倾斜） 可选。定义字体的样式。默认是 “normal”。
font-weight：normal,bold,100,200…900 可选。定义字体的粗细。默认是 “normal”。

一个字体网站