网站字体处理和图片高清处理

一、网站图片高清处理

---

先说下一些定义：

1. 单位英寸像素数（Pixel Per Inch，PPI）：现实世界的一英寸内像素数，决定了屏幕的显示质量
2. 设备像素比率（Device Pixel Ratio，DPR）：物理像素与逻辑像素（px）的对应关系
3. 分辨率（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！
欢迎吐槽！
更加欢迎大神指点！