文本字体
所有的网页都会包含文本，这就会涉及字体样式和文本对齐的设置。其中font-系列属性用于设置字体，text-系列属性用于文本，另外设置字体颜色为color。
字体样式
CSS中使用复合font：size weight style；设置字体的大小 粗细 斜体等样式，通过color属性设置字体颜色，font-family属性可以设置字体类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{width: 100px;height: 100px; background-color: rgba(255, 0, 0, 0.75);text-align: center;}
</style>
</head>
<body>
<div class="container" style="font: 20px bold italic;">Hello World</div><!--大小粗细斜体-->
<div class="container" style="color: #ff00ff;">Hello World</div><!--字体颜色-->
<div class="container" style="font-family: Verdana, Geneva, Tahoma, sans-serif;">Hello World</div><!--字体-->
</body>
</html>
字体颜色通过
color: #ff00ff属性设置，其它字体样式均可以通过font-*属性设置，比如font-size，font-weight，font-style。字体显示不同浏览器之间可能出现差异。
字体规则
通过@font-face，可以使用自定义字体文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{width: 100px;height: 100px; background-color: rgba(255, 0, 0, 0.75);text-align: center;}
@font-face{
font-family: myFont;/*字体规则指定字体名称和字体文件*/
src: url('Sansation_Light.ttf');
}
</style>
</head>
<body>
<div class="container" style="font-family: myFont;">Hello World</div><!--font-family属性引用自定义的字体-->
</body>
</html>
@font-face{}指定字体名称和字体文件，font-family或font属性引用自定义字体。
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{max-width: 860px;min-height: 100px;}
</style>
</head>
<body>
<div class="container" style="color: #ff00ff;">Hello World</div><!--文本颜色-->
<div class="container" style="text-decoration: underline;">Hello World</div><!--文本装饰-->
<div class="container" style="text-transform: uppercase">Hello World</div><!--文本大小写-->
<div class="container" style="text-shadow: 2px 2px #ffff00;">Hello World</div><!--文本阴影-->
</body>
</html>
文本阴影前两个参数分别设置x y轴的偏移量，可为负数，第三个参数设置阴影颜色。
文本对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{max-width: 860px;min-height: 100px;}
</style>
</head>
<body>
<div class="container" style="text-align: center;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dicta nesciunt, animi molestias impedit natus atque iusto explicabo aspernatur omnis nisi quasi, ut dolore pariatur est sunt expedita quam at!</div><!--文本对齐方向-->
<div class="container" style="line-height: 100px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum necessitatibus eligendi animi distinctio, quae molestias velit sunt deserunt commodi, id vero odit sed? Harum possimus molestiae consectetur distinctio rerum voluptatem.</div><!--设置行高-->
<div class="container" style="white-space: nowrap;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum necessitatibus eligendi animi distinctio, quae molestias velit sunt deserunt commodi, id vero odit sed? Harum possimus molestiae consectetur distinctio rerum voluptatem.</div><!--文本留白方式-->
<div class="container" style="text-indent: 20px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum necessitatibus eligendi animi distinctio, quae molestias velit sunt deserunt commodi, id vero odit sed? Harum possimus molestiae consectetur distinctio rerum voluptatem.</div><!--首行缩进-->
</body>
</html>
block元素设置行高等于高时文本垂直居中。
网友评论