一、小述
作为一个并非前端开发的人，却有时候喜欢前端的一些东西。如果说网站是一项建筑工程的话，那么后台就是比较重量级的钢筋水泥土，先搭建好整体框架，然后再慢慢地填充。那么前端就是修补、装饰、美化等工作了，它起到了让人一眼都爱上她的作用。一个网站的好坏，不仅仅是性能上的比较，很多时候是界面美化和用户体验上的。对于界面美化，Ps能很好胜任，本人Ps也不差，然后就是HTML系列、Css系列；对于用户体验上，我相信Javascript、Jquery、Ajax一定能胜任。
爱美之心，人人皆有，对于网站整体设计亦如此。今天就来学习网页设计中字体的技巧。
二、Css字体
1、字体系列：
W3C中说：在 CSS 中，有两种不同类型的字体系列名称：通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）、特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"），这里我们最好配合使用，以免其他机器上没有安装指定的字体。
2、字体大小：
font-size 值可以是绝对或相对值。
绝对大小：
(1).文本大小设置指定
(2).不允许用户在所有浏览器中改变文本大小（不利于可用性）
(3).绝对大小在确定了输出的物理尺寸时很有用
相对大小：
(1).相对于周围的元素来设置大小
(2).允许用户在浏览器改变文本大小
注意：如果没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
这里W3C 推荐使用 em 尺寸单位。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用下面这个公式将像素转换为 em：pixels/16=em。
注意：无论是使用em还是pixels，在IE都有可能出现在重设文本大小时，会比正常的尺寸更大或更小的问题，对于这一点我们综合使用百分比和em就能很好解决。在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：如：body{font-size:100%;} h2{ font-size:1.5em}
更多相关参考：http://www.divcss5.com/html/h89.shtml
3、了解font-variant属性
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。所有主流浏览器都支持 font-variant 属性。它有三个值：
normal:默认值。浏览器会显示一个标准的字体。
small-caps:浏览器会显示小型大写字母的字体。
inherit:规定应该从父元素继承 font-variant 属性的值。不做要求
如：
三、关于css字体简写
如：
可以简写为：font:bold italic 1em/1.5em small-caps verdana,serif
注意的是：简写的顺序很重要，如果顺序不对那么就解析不出来，争取到属顺序是：font:字体粗细 字体样式 字体大小/行高 ……
四、Css字体距离
text-indent:20px;设置开头的缩进
letter-spacing:3px;设置字体间距
Web设计中19个常用安全字体：http://www./css/23416.html
本文链接
1.禁止客户端缓存要在
<head>中加入类似如下内容
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
2.在服务器的动态网页中禁止缓存，要加入类似如下脚本
(1)asp
<%
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
%>
(2)php
header("Pragma:no-cache");
header("Cache-Control","no-cache");
header("Expires:0");
(3)jsp
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
Pragma HTTP头信息 (为什么它不起作用)
很多人认为在HTTP头信息中设置了Pragma: no-cache后会让内容无法被缓存。但事实并非如此：HTTP的规范中，响应型头信息没有任何关于Pragma属性的说明，而讨论了的是请求型头信息 Pragma属性（头信息也由浏览器发送给服务器），虽然少数集中缓存服务器会遵循这个头信息，但大部分不会。用了Pragma也不起什么作用，要用就使 用下列头信息：
使用Expires（过期时间）HTTP头信息来控制保鲜期Expires（过期时间） 属性是HTTP控制缓存的基本手段，这个属性告诉缓存器：相关副本在多长时间内是新鲜的。过了这个时间，缓存器就会向源服务器发送请求，检查文档是否被修改。几乎所有的缓存服务器都支持Expires（过期时间）属性；
大部分Web服务器支持你用几种方式设置Expires属性；一般的：可以设计一个绝对时间间隔：基于客户最后查看副本的时间（最后访问时间）或者根据服务器上文档最后被修改的时间；
Expires头信息：对于设置静态图片文件（例如导航栏和图片按钮）可缓存特别有用；因为这些图片修改很少，你可以给它们设置一个特别长的过期时间，这会使你的网站对用户变得相应非常快；他们对于控制有规律改变的网页也很有用，例如：你每天早上6点更新新闻页，你可以设置副本的过期时间也是这个时间，这样缓存 服务器就知道什么时候去取一个更新版本，而不必让用户去按浏览器的“刷新”按钮。
过期时间头信息属性值只能是HTTP格式的日期时间，其他的都会被解析成当前时间“之前”，副本会过期，记住：HTTP的日期时间必须是格林威治时间（GMT），而不是本地时间。举例：
所以使用过期时间属性一定要确认你的Web服务器时间设置正确，一个途径是通过网络时间同步协议（Network Time Protocol NTP），和你的系统管理员那里你可以了解更多细节。
虽然过期时间属性非常有用，但是它还是有些局限，首先：是牵扯到了日期，这样Web服务器的时间和缓存服务器的时间必须是同步的，如果有些不同步，要么是应该缓存的内容提前过期了，要么是过期结果没及时更新。
还有一个过期时间设置的问题也不容忽视：如果你设置的过期时间是一个固定的时间，如果你返回内容的时候又没有连带更新下次过期的时间，那么之后所有访问请求都会被发送给源Web服务器，反而增加了负载和响应时间；
HTTP 1.1介绍了另外一组头信息属性：Cache-Control响应头信息，让网站的发布者可以更全面的控制他们的内容，并定位过期时间的限制。
有用的 Cache-Control响应头信息包括：
- max-age=[秒] — 执行缓存被认为是最新的最长时间。类似于过期时间，这个参数是基于请求时间的相对时间间隔，而不是绝对过期时间，[秒]是一个数字，单位是秒：从请求时间开始到过期时间之间的秒数。
- s-maxage=[秒] — 类似于max-age属性，除了他应用于共享（如：代理服务器）缓存
- public — 标记认证内容也可以被缓存，一般来说： 经过HTTP认证才能访问的内容，输出是自动不可以缓存的；
- no-cache — 强制每次请求直接发送给源服务器，而不经过本地缓存版本的校验。这对于需要确认认证应用很有用（可以和public结合使用），或者严格要求使用最新数据的应用（不惜牺牲使用缓存的所有好处）；
- no-store — 强制缓存在任何情况下都不要保留任何副本
- must-revalidate — 告诉缓存必须遵循所有你给予副本的新鲜度的，HTTP允许缓存在某些特定情况下返回过期数据，指定了这个属性，你高速缓存，你希望严格的遵循你的规则。
- proxy-revalidate — 和 must-revalidate类似，除了他只对缓存代理服务器起作用
举例:
首先非常感谢这篇博文：
http://www.cnblogs.com/rubylouvre/archive/2012/11/06/2757175.html
demo01.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>方向反馈</title>
<style type="text/css">
html,body{margin:0;padding:50px;}
#wrap{position:relative;width:400px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;overflow:hidden;}
</style>
<body>
<div id="wrap">
方向反馈
</div>
<div id="result" >
<span style="color:#FFF;">反馈方向</span>
</div>
<script src=/blog_article/"/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src=/blog_article/"rollingMask-0.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.rollingMask({
objId:"wrap",
content:$("#result").html()
});
});
</script>
</body>
</html>rollingMask-0.1.0.js
/**
* 不同方向的卷帘效果
*
**/
$.extend({
rollingMask:function(opt,callback){
this.defaults = {
objId:"", // 容器id
content:"test", // 卷帘内容
opacity: 0.8,
fadeSpeed:150 // 卷帘消失的时间
};
// 参数初始化
var opts = $.extend(this.defaults,opt);
var contentId = opts.objId + "_content";
var showId = opts.objId + "_show";
$("#" + opts.objId).bind("mouseenter mouseleave",
function(e) {
var w = $(this).width();
var h = $(this).height();
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
var eventType = e.type;
if(e.type == 'mouseenter'){
$("#" + opts.objId).append("<div id=\"" + contentId+ "\">" + opts.content + "</div>");
$("#" + contentId).css({
"position":"absolute",
"width":w + "px",
"height":h + "px",
"top":"0px",
"left":"0px",
"background":"#F55",
opacity:opts.opacity
});
switch(direction){
case 0:
$("#" + contentId).css("top",-h + "px");
break;
case 1:
$("#" + contentId).css("left",w + "px");
break;
case 2:
$("#" + contentId).css("top",h + "px");
break;
case 3:
$("#" + contentId).css("left",-w + "px");
break;
}
$("#" + contentId).animate({"top":"0px","left":"0px"});
}else{
$("#" + contentId).fadeOut(opts.fadeSpeed, function(){
$("#" + contentId).remove();
});
}
}
);
}
});