一、网站图片高清处理
先说下一些定义：
- 单位英寸像素数（Pixel Per Inch，PPI）：现实世界的一英寸内像素数，决定了屏幕的显示质量
- 设备像素比率（Device Pixel Ratio，DPR）：物理像素与逻辑像素（px）的对应关系
- 分辨率（Resolution）：屏幕区域的宽高所占像素数
目前，所有非Retina的Mac，所有非Retina的iOS设备的-webkit-min-device-pixel-ratio值差不多都是1，而所有的iOS、Mac设备的-webkit-min-device-pixel-ratio值都是大于1.0，可能是1.5~2.0
所以这里说的图片高清处理意义就是，让我们的网站在这些-webkit-min-device-pixel-ratio：value > 1的设备上，能够更加友好的展现。
方法例子：
用@media方法，处理大背景图，2x代表两倍的高清图
.banner{
background: url(../img/banner.png) top center no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi),(min-resolution:144dppx) {
.banner {
background-image:url("../img/banner2x.png");
background-size: cover;
}
... //如果多张需要处理在此往下罗列
}
二、网站字体处理：加入非常规字体--如 ‘ 方正兰亭细黑简体 ’
一般写法：
body {
font: 12px/1 "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei","黑体", sans-serif;
}
// 这种办法所用都是通用字体
下面介绍下@font-face方法
主流浏览器都能很好地支持@font-face，但对于嵌入的字体文件的识别，却是各有各的喜好。
所以在写@font-face语句之前，需要获取要使用字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。
字体四种格式介绍：
.TTF或.OTF，适用于Firefox 、Safari、Opera
.EOT，适用于Internet Explorer 4.0+
.SVG，适用于Chrome、IPhone
.WOFF 知用于Chrome、Firefox
下面是书写格式：
@font-face {
font-family: 'fontNameRegular';
src: url('fontName.eot'); //fontName为你的字体名称
src: local('fontName Regular'),
local('fontName'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
}
下面是各浏览器对各字体格式支持情况： 请允许我借图
QQ截图20150730190449.png
通过上图个人感觉三个格式就够了： .woff 、 .ttf 、 .eot
哦！对了！在此介绍一个在线字体格式转换工具：fontsquirrel
挺好用的~
然而在XP系统上，不管你用的什么字体，除了12号宋体外都很丑，而且，字大了会有** 毛边！毛边！毛边！**重要的事情说三遍！所以我为了能让字体在xp上看着相对友好一点，又去参考了下苹果官网的写法，如下：
@font-face {
font-family:'PingHei';
font-style:normal;
font-weight:200;
src:local("../webfontkit/pinghei-light-webfont"), url("../webfontkit/pinghei-light-webfont.woff") format("woff"), url("../webfontkit/pinghei-light-webfont.ttf") format("truetype");
}
@font-face {
font-family:'PingHei 200';
src:url("../webfontkit/pinghei-light-webfont.eot");
}
啊~ 字体终于不那么丑了！虽然还是比较丑，但是XP说：我就这么显示，你要我呀！...
OK，this all！
欢迎吐槽！
更加欢迎大神指点！
网友评论