慕课前端入门-CSS文本与字体

1. CSS文本

属性	语法	示例
阴影文本text-shadow	text-shadow: h-shadow w-shadow blur color; h-shadow：水平方向偏移正右负左 v-shadow：垂直方向偏移正下负上 blur：模糊 color：颜色	p{text-shadow: 5px 5px 0 red;}
文本轮廓text-outline	text-outline:thickness blur color; thickness:宽度值 blur:模糊 color:颜色	主流浏览器不支持
CSS换行word-break 规定自动换行的处理方法	word-break:normal/break-all/keep-all; normal：使用浏览器默认的换行规则 break-all：在所有地方，只要到换行的地方，就换行。单词会被分为2行 keep-all：只能在半角或连字符的地方换行，与normal类似	p{word-break: keep-all;}
word-wrap属性只针对拉丁文本允许长单词或URL地址换行到下一行	word-wrap:normal/break-word; normal:默认，不换行 break-word:换行	p{word-wrap: break-word;}
text-align-last属性规定如何对齐文本的最后一行	text-align-last:auto/left/right/center/justify/start/end/initial/inherit 注意：text-align-last只有在text-align属性为justify时才起作用 auto：默认左对齐 left：强制左对齐 right：强制右对齐 center：强制居中对齐 justify：两端对齐 start：与主文本一致。主文本左对齐，就左对齐；主文本右对齐，就右对齐。 end：与主文本相反。主文本左对齐，就有对齐；主文本右对齐，就左对齐。 initial：用来设置属性的默认值。 inherit：继承父级元素。	text-align-last:left;
text-overflow属性规定当文本溢出元素是发生的事情。	text-overflow:clip/ellipsis/string clip：剪掉溢出的文本 ellipsis：使用省略号代替溢出的文本 string：自己指定符号，用来表示剩余文本。只有火狐能用

text-overflow示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>text-overflow</title>
	<style type="text/css">
		p {  500px;font-size:20px; margin: 10px auto; background: #abcdef;overflow: hidden;}
		/*此处写代码*/
		 .p1{text-overflow: ellipsis;}
        .p2{text-overflow: clip;}
        p:hover{overflow: visible;}
	</style>
</head>
<body>
	<p class="p1">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
	<p class="p2">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
</body>
</html>

1.1 over-flow属性

visible：默认值，内容不会被修剪，会呈现在元素框之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看剩余的内容
auto：如果内容被修剪，则浏览器会呈现滚动条以便查看剩余的内容
inherit：从父元素继承overflow属性的值

2.@font-face

以前都需要把网站、网页用安全字体，比如中文-微软雅黑、黑体、宋体，英文用Arial。
这一类的安全字体是系统自带，所以我们在网页当中应用时，因为系统有这个字体，所以网页会自动渲染出来。
假如系统中没有某个字体，比如行草。客户在浏览页面时，因为本地电脑未安装这个字体，就会使用系统默认字体。
所以W3C提出了font-face模块。这个模块将使网站开发不再局限于安全的字体。可以把特殊字体使用该模块来引入。可以理解为把字体文件放在服务器当中，当我们加载网页的时候会把字体同时下载下来，以供页面使用。

@font-face使用不多，一般把特殊字体做成图片导入。

2.1 @font-face语法规则

      @font-face{
            font-family: <YourWebFontName>;/*字体名称，它将被应用到web元素的font-family。建议将用于作为名称，更为直观。比如段落标题paragraphTitle*/
            src: <source>[<fomat>],<source>[<format>];/*自定义字体的的存放路径，可以是相对路径，也可以是绝对路径。建议用相对路径，管理更方便；format：自定义字体的格式，主要用来帮助浏览器识别*/
            [font-weight: <weight>];/*引入字体是否加粗，可选*/
            [font-style:<style>];/*引入字体样式的设置，可选*/
      }

2.2 @font-face的字体格式

格式	说明
TrueType(.ttf)格式	.ttf字体使Windows和Mac的最常见的字体，是一种RAW(写入式)格式，因此他不为网站优化(支持的就支持，不支持就不支持)
OpenType(.otf)	.otf字体被认为是一种原始的字体格式，其内置在TrueType的基础上，所以也提供了更多的功能
WebOpenFontFormat(.woff)	.woff字体是web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。
EmbeddedOpenType(.eot)	.eot是IE专用字体，可以从TrueType创建此格式字体，仅支持IE4+浏览器
SVG(.svg)	.svg字体是基于SVG字体渲染的一种格式。IE、火狐不兼容

2.3 @font-face的字体应用

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		@font-face{
			font-family: 'myFont';
			src:url('myFont.eot');/* IE9 */
			src:url('myFont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
				url('myFont.ttf') format('truetype'),/* Safari, Android, IOS 针对移动端*/
				url('myFont.woff') format('woff'),/* Modern Browsers 兼容所有浏览器*/
				url('myFont.svg#myFont') format('svg');/* Legacy IOS 针对iOS开发*/
		}
		h1{font-family: 'myFont';}
	</style>
</head>
<body>
<h1>多年以后，奥雷连诺上校站在行刑队面前，准会想起父亲带他去参观冰块的那个遥远的下午。当时，马孔多是个二十户人家的村庄，一座座土房都盖在河岸上，河水清澈，沿着遍布石头的河床流去，河里的石头光滑、洁白，活象史前的巨蛋。</h1>
</body>
</html>