字体

一、各移动设备系统支持情况

 

字体                            安卓4.0+           IOS6.0+             WP8
sans-serif（无衬线）  支持                  支持                   支持
serif（衬线）              支持                  支持                   支持
monospace（等宽）  支持                  支持                   支持
fantasy（梦幻）         不支持               支持                   支持
cuisive（草体）          不支持              不支持                不支持



二、常用CSS中不同平台的字体设置


移动端项目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
 

pc端(含Mac)项目：

font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;
 

移动和pc端项目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

placeholder样式设置

::-webkit-input-placeholder

穿透层的鼠标时间：

pointer-events:none;

webapp去掉点击的透明遮罩：

-webkit-tap-highlight-color: rgba(0,0,0,0);

css灰色：

{

filter: grayscale(100%); 

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  

-webkit-filter: grayscale(1);

}

css3高级用法：

 input,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;}
/* 禁用select默认下拉箭头 */
select::-ms-expand{display:none;}
/* 禁用PC端表单输入框默认清除按钮 */
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none;}
/* 禁用radio和checkbox默认样式 */
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;} 

/*设置垂直居中*/

{

    -webkit-box-pack: center;
    -webkit-box-align: center;
    -moz-box-pack: center;
    -moz-box-align: center;
    box-pack: center;
    box-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: box;
}