慕课前端入门-CSS文本与字体
1. CSS文本
| 属性 | 语法 | 示例 |
|---|---|---|
| 阴影文本text-shadow | text-shadow: h-shadow w-shadow blur color;
| p{text-shadow: 5px 5px 0 red;} |
| 文本轮廓text-outline | text-outline:thickness blur color;
| 主流浏览器不支持 |
| CSS换行word-break 规定自动换行的处理方法 | word-break:normal/break-all/keep-all;
| p{word-break: keep-all;} |
| word-wrap属性 只针对拉丁文本 允许长单词或URL地址换行到下一行 | word-wrap: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时才起作用
| text-align-last:left; |
| text-overflow属性 规定当文本溢出元素是发生的事情。 | text-overflow:clip/ellipsis/string
|
text-overflow示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
p { width: 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>
