玩命牛的成长记录（二十三）——各种文字特效
欣欣（1989—）
自动化专业研究生，转行当程序员，在一家国内领先的IT公司工作，业余时间兼职创业，创办网站 欣欣网站制作。
玩命牛（1989—）
欣欣的本科同学，学习非常玩命，本科毕业后去了一家小公司，干得并不称心，正准备转行IT，听说本科同学欣欣正在兼职互联网创业，特邀他一起合租，同时加入了兼职创业的队伍。
各种文字特效
CSS3为文字添加了很多特效，做特效文字不必再使用图片了，首先我们看一下text-shadow，文字阴影。看个例子：
html：
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>各种文字特效</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="textShadow">text shadow</div> <div class="multiTextShadow">multi text shadow</div> <div class="lightText">light text</div> <div class="embossText">emboss text</div> <div class="blurText">blur text</div> <div class="hollowText">hollow text</div> <div class="ThreeDText">3d text</div> </body>check the result
css：
.textShadow {
font-weight : bold;
font-size : 50px;
text-shadow : 10px 10px 1px red;
}
.multiTextShadow {
font-weight : bold;
font-size : 50px;
text-shadow : 10px 10px 1px red, 5px 5px 0px blue;
}
.lightText {
font-weight : bold;
font-size : 50px;
text-shadow : 0 0 20px red;
}
.embossText {
font-weight : bold;
font-size : 50px;
text-shadow : 2px 2px 1px #333;
}
.blurText {
color : transparent;
font-weight : bold;
font-size : 50px;
text-shadow : 0 0 5px #f96;
}
.hollowText {
color : transparent;
font-weight : bold;
font-size : 50px;
text-shadow : -1px -1px 0 #fff, 1px 1px 0 #333;
}
/*css的class不能用数字开头，.3DText将无法生效*/
.ThreeDText {
color : #fff;
font-weight : bold;
font-size : 50px;
text-shadow: 1px 1px rgba(197, 223, 248, 0.8), 2px 2px rgba(197, 223, 248, 0.8), 3px 3px rgba(197, 223, 248, 0.8), 4px 4px rgba(197, 223, 248, 0.8), 5px 5px rgba(197, 223, 248, 0.8), 6px 6px rgba(197, 223, 248, 0.8);
}
text-shadow有4个属性可以设置：x的偏移，y的偏移，模糊半径和颜色，比box-shadow少两个。它同样可以设置多重样式，还记得之前用position实现的重影字么？用text-shadow直接就能实现，方便很多啊。text-shadow使用得好还能产生很多很不错的效果，这些效果其实就是用多重阴影叠加起来的。
然后我们来看看自定义的字体怎么弄。这就要用到@font-face这个东西了。首先要解决的问题就是字体去哪里找，可以在这里找到，自己找字体，点击download就能下载，下载下来解压后是一个ttf的文件，这就是字体文件了。ttf是一种字体格式，但是只有这一种格式还不够，通过ttf我们还可以生成其他格式的字体，这就要到这里了，其实这个网站也能下载字体，看大家习惯啦，要生成@font-face所需要的字体，可以点击网站上面的WEBFONT GENERATOR，上传ttf文件，三个单选可以选择OPTIMAL，勾上Agreenment，就可以点击DOWNLOAD YOUR KIT下载文件了。这个包里面的东西就全了，有我们要的所有字体文件，还有一个stylesheet.css告诉我们怎么写@font-face，还有一个demo.html，到这里相信大家都会了，来个例子看看：
html：
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>各种文字特效</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="NaughtyFont">Naughty Font</div> <div class="OpenFont">Open Font</div> </body>check the result
css：
@font-face {
font-family: 'naughty_cartoonsregular';
src: url('Naughty Cartoons-webfont.eot');
src: url('Naughty Cartoons-webfont.eot?#iefix') format('embedded-opentype'),
url('Naughty Cartoons-webfont.woff2') format('woff2'),
url('Naughty Cartoons-webfont.woff') format('woff'),
url('Naughty Cartoons-webfont.ttf') format('truetype'),
url('Naughty Cartoons-webfont.svg#naughty_cartoonsregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'open_sanslight';
src: url('OpenSans-Light-webfont.eot');
src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('OpenSans-Light-webfont.woff2') format('woff2'),
url('OpenSans-Light-webfont.woff') format('woff'),
url('OpenSans-Light-webfont.ttf') format('truetype'),
url('OpenSans-Light-webfont.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
.NaughtyFont {
font-family : 'naughty_cartoonsregular';
font-size : 50px;
}
.OpenFont {
font-family : 'open_sanslight';
font-size : 50px;
color : red;
}
我们定义好@font-face之后，只要在使用到字体的地方设置font-family，对应@font-face中的font-family，就可以引用自定义字体了，记得把所有的字体文件都拷过来哦！
有时候我们的网站中会需要一些图标，我们可以用图片，但是一个好的前端工程师会依赖图片吗，NO，字体也能变成图标！那么问题还是怎么找图标呢？到这里来，点击IconMoon App，看到了吧？这里有很多图标，我们选择几个图标，注意哦，被选中的图标会呈橙色高亮状态。选好后，点击网页下方右侧的CREATE FONT，然后再download就行。同样，下载的包里面有style.css和demo.html，还有fonts。打开css和demo看看，就明白了，其实也是用font-face，只是引用图标的时候要用demo中的方式引用。我的实现：
html：
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>各种文字特效</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="iconDiv"> <span class="icon"></span> <span>icon-home</span> </div> <div class="iconDiv"> <span class="icon"></span> <span>icon-play</span> </div> <div class="iconDiv"> <span class="icon"></span> <span>icon-stack</span> </div> <div class="iconDiv"> <span class="icon"></span> <span>icon-clock</span> </div> </body>check the result
css：
@font-face {
font-family: 'icomoon';
src:url('icomoon.eot?-w5jdd4');
src:url('icomoon.eot?#iefix-w5jdd4') format('embedded-opentype'),
url('icomoon.woff?-w5jdd4') format('woff'),
url('icomoon.ttf?-w5jdd4') format('truetype'),
url('icomoon.svg?-w5jdd4#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.iconDiv {
font-size : 30px;
}
.icon {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
不过作为一个中国人，我还是有点不满意，好像还没有试过自定义中文字体呢，赶紧来试试吧，上面的方法好像无法创建中文字体，难道就这样放弃吗？不行，玩命也要做出来。在网上搜索解决方案，发现了有字库网站。正是我的菜，按照说明，很快就能做出一个例子：
html：
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>各种文字特效</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="minijianshaoer">
<p>大家好，我是玩命牛</p>
<p>很高兴见到大家</p>
<p>希望大家继续支持我</p>
</div>
</body>
<script type="text/javascript"
src="http://www.youziku.com/UserDownFile/jquery.min.js"></script>
<script type="text/javascript"
src="http://www.youziku.com/UserDownFile/jquery.md5.js"></script>
<script type="text/javascript">
function youziku19466() {
var resultStr = $(".minijianshaoer").text();
var md5 = "";
resultStr = Trim(resultStr);
resultStr = SelectWord(resultStr);
md5 = $.md5("307d095efdb94d5eb6c8429107ad69d9" + "minijianshaoer"
+ resultStr);
$.getJSON("http://www.youziku.com/webfont/CSSPOST?jsoncallback=?", {
"id" : md5,
"guid" : "307d095efdb94d5eb6c8429107ad69d9",
"type" : "5"
}, function(json) {
if (json.result == 0) {/*alert("需要生成");*/
$.post("http://www.youziku.com/webfont/PostCorsCreateFont", {
"name" : "minijianshaoer",
"gid" : "307d095efdb94d5eb6c8429107ad69d9",
"type" : "5",
"text" : resultStr
}, function(json) {
if (json == "0") { /*alert("参数不对");*/
} else if (json == "2") {/*alert("超过每日生成字体数的上限");*/
} else if (json == "3") { /*alert("当前正在生成请稍后");*/
} else {/*alert("正在生成");*/
}
});
} else {/*alert("下载css文件");*/
loadExtentFile("http://www.youziku.com/webfont/css?id=" + md5
+ "&guid=" + "307d095efdb94d5eb6c8429107ad69d9"
+ "&type=5");
}
});
}
(function youziku() {
if (window.location.href.toString().substring(0, 7) == "file://") {
alert("你当前是通过双击打开html文件，进行本地测试的，这样看不到字体效果，一定要通过本地建立的虚拟网站或发布到外网进行测试。详见有字库的使用说明。");
} else {
youziku19466();
}
})()
</script> check the result
竟然不用写css和font-face啥的，因为css在有字库的网站上，是通过js下载到本地的，这就是云字库的意思啦，不过下载需要时间，过程有点慢，效果就是这样，大家看着办吧！
有了这些神器，妈妈还会担心我的字体不够用吗？