常用css属性

前言

记录常用又背不过的CSS属性！

调整字体间距

1	letter-spacing: 2px;

阻止点击、状态变化和鼠标指针变化

1	pointer-events: none;

参考CSS里的pointer-events属性

移动端(Android、IOS)点击元素时的灰色背景

1	-webkit-tap-highlight-color: transparent;

也可将transparent设置成其他颜色！

引入外部字体

用法

@font-face{
    font-family: "字体名字，字母拼写，需要带引号";
    src:url('字体相对/绝对路径') format('类型');
}
body, html{
    font-family: '本地字体1','本地字体2',引入的字体;
}

format类型：

指字体格式，主要用于浏览器识别。

String	Font Format	Common extensions
‘woff’	WOFF (Web Open Font Format)	.woff
‘truetype’	TrueType	.ttf
‘opentype’	OpenType	.ttf, .otf
‘embedded-opentype’	Embedded OpenType	.eot
‘svg’	SVG Font	.svg, .svgz

兼容性：

兼容性

说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念：

1、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile Safari4.2+】；

2、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10.0+, iOS Mobile Safari4.2+】；

3、Web Open Font Format(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+, Firefox3.5+, Chrome6+, Safari3.6+, Opera11.1+】；

4、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

5、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+, Safari3.1+, Opera10.0+, iOS Mobile Safari3.2+】。

其中兼容写法：

@font-face {  	
    font-family: 'YourWebFontName';  	
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */  	
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */               
         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */               
         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */               
         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */     
}

针对不同浏览器内核，HTML辨别方法

IE浏览器：

非IE浏览器：

针对不同浏览器内核，CSS辨别方法

/* 设置文字不可选取 */
* {
  -moz-user-select: none; /* 火狐 浏览器 */
  -webkit-user-select: none; /* Webkit 浏览器 */
  -o-user-select: none; /* Opera 浏览器 */
  -ms-user-select: none; /* IE10 浏览器 */
  -khtml-user-select: none; /* 早期浏览器 */
  user-select: none; /* 默认 */
}

-------------End，感谢阅读！-------------