CSS3入门之文本与字体.md

title	date
CSS3入门之文本与字体	2017/02/21 14:47:10

1、CSS3文本效果

1.1、text-shadow文本阴影

语法：text-shadow: h-shadow v-shadow blur color;(<水平阴影>，<垂直阴影>，[模糊距离]，[阴影颜色])

示例：

<h1 style="text-shadow: 5px 5px 2px green;">我是文本阴影</h1>
<h1 style="text-shadow: 0 0 5px blue;">我是文本阴影</h1>
<h1 style="text-shadow: 2px 2px 4px #000000;color: white;">我是文本阴影</h1>

我是文本阴影

我是文本阴影

我是文本阴影

该属性兼容IE10+以及所有现代浏览器

1.2、word-break文本换行

语法： word-break: normal|break-all|keep-all;

normal:默认换行；break-all:允许在单词内换行；keep-all:只能在半角空格或连字符处换行

示例：

<div style="width:100px;word-break:break-all;">Nice to meet you. good mor-ning.</div>
<div style="width:100px;word-break:keep-all;">Nice to meet you. good mor-ning.</div>

Nice to meet you. good mor-ning.

Nice to meet you. good mor-ning.

1.3、text-overflow修剪文本

语法：text-overflow: clip|ellipsis|string;

示例：

<div style="width: 100px; overflow:hidden; white-space:nowrap;text-overflow: clip;">Nice to meet you. good mor-ning.</div>
<div style="width: 100px; overflow:hidden; white-space:nowrap;text-overflow: ellipsis;">Nice to meet you. good mor-ning.</div>

Nice to meet you. good mor-ning.

Nice to meet you. good mor-ning.

注意：使用text-overflow的时候，需要与overflow:hidden;white-space:nowrap;协同使用

2、CSS3字体

在CSS3之前，必须使用已经在用户计算机上安装好的字体，给Web设计带来很大的局限性。现在，通过CSS3,Web设计师可以使用他们喜欢的任意字体。

2.1、@font-face引入网络字体

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

不兼容IE8，IE8-。

示例：

<style>
	@font-face {
		font-family: SentyPaperCut;
		src:url(http://hstarcdn.github.io/fonts/SentyPaperCut.ttf);
	}
	@font-face {
		font-family:SentyCreamPuff;
		src:url(http://hstarcdn.github.io/fonts/SentyCreamPuff.otf);
	}
	.font1,.font2{
	  font-size: 50px;
	}
	.font1{
	  color: red;
	  font-family: SentyTEA-Platinum;
	}
	.font2{
	  color: blue;
	  font-family: SentyCreamPuff;
	}
</style>

<span class="font1">
  自定义字体演示
</span>
<span class="font2">
  自定义字体演示
</span>

<style> @font-face { font-family: SentyTEA-Platinum; src:url(http://hstarcdn.github.io/fonts/SentyTEA-Platinum.ttf); } @font-face { font-family:SentyCreamPuff; src:url(http://hstarcdn.github.io/fonts/SentyCreamPuff.otf); } .font1,.font2{ font-size: 50px; } .font1{ color: red; font-family: SentyTEA-Platinum; } .font2{ color: blue; font-family: SentyCreamPuff; } </style> 自定义字体演示 自定义字体演示

除此之外，在@font-face中，还可以设置多种字体描述符，如：

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	ormal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。