<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
padding: 50px 0px;
background: #F1f1f1;
text-align: center;
}
div {
font-size: 60px;
line-height: 100px;
width: 100%;
}
.font1 {
color: transparent;
-webkit-text-stroke: 1px red;
letter-spacing: 0.04em;
}
.font2 {
background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
text-shadow: 5px -5px black, 4px -4px white;
font-weight: bold;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text
}
.font3 {
color: gold;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135
}
.font4 {
font-family: cursive;
text-shadow: 6px 2px 2px #333;
color: deeppink
}
</style>
</head>
<body>
<h1>四款好看的字体</h1>
<div class="font1">HELLO WORD!</div>
<div class="font2">HELLO WORD!</div>
<div class="font3">HELLO WORD!</div>
<div class="font4">HELLO WORD!</div>
</body>
</html>
正文完