CSS 字体文件引用

<!DOCTYPE html>
<html>
<head>
	<title> 字体文件引用</title>
<style type="text/css">	
@font-face {
    font-family: 'fontsTest'; 
    src: url('PingFangSCRegular.ttf'); /*fonts file dirpath*/
}
html,body {
	font-family: fontsTest, sans-serif; 	
    font-weight: 700; /*100 400 700*/
    font-style: normal; /*normal italic oblique*/
    font-size: 24px; /*12px 22px 24px*/
}
</style>
</head>
<body>
	ABCDEFGHIJKLMNOPQRSTUVWXYZ<BR>
	abcdefghijklmnopqrstuvwxyz<BR>
	你在我心里永远是一个可爱的人.<BR>
</body>
</html>

CSS 转换文本大小写

<html>
<head>
<style type="text/css">
  h1 {text-transform: uppercase} /*全部大写*/
  p.uppercase {text-transform: uppercase} /*全部大写*/
  p.lowercase {text-transform: lowercase} /*全部小写*/
  div.capitalize {text-transform: capitalize} /*首字母大写*/
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<div class="capitalize">This is some text in a paragraph.</div>
</body>
</html>
text-transform: uppercase; /**单行范例**/
描述
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。

CSS 中 IE、Firefox、Chrome、Opera 各浏览器私有属性

-moz 代表 Firefox 浏览器私有属性
-ms 代表 IE 浏览器私有属性
-webkit 代表 Chrome、Safari 私有属性
-o 代表 Opera 浏览器私有属性

举例:

<style type="text/css">
.linear{
width:100%;
height:600px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/
background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/
}
</style>