css实例--文字/字体

使用自定义字体：

• 在CSS2中font-family属性只能使用两个字体：
  • 通用字体：Serif字体，Sans-serif字体，Monospace字体，Cursive字体,Fantasy字体;
  • 特定字体：如Times,Courier等，要求计算机已经安装该字体；
  • 使用@font-face：

    @font-face{
       font-family:example;
       src:url('example.ttf') , url('example.eot');/*IE9+*/
    }
    div{
      font-family:example;
    }
    

    在字体中，IE只支持自有的.eot,其他浏览器支持可能包括.svg,.ttf,.woff;　　

文本缩进和首字符下沉：

• 缩进：text-indent;
• 首字符设置： :first-letter;

文本被选中：

::selection{}
//老版本的firefox
::-moz-selection{}

调整文字，字符间距：

• demo:
  • word-spacing：空格距离；
  • letter-spacing：子间距离；
  • line-heigh：文本行间距；
  • white-space：空格，换行符的控制；
  • 强制换行：word-wrap: break-word; word-break: normal;

 文字阴影/框阴影：

• text-shadow： h-shadow(必须)  v-shadow(必须)  blur  color;
• 文字毛玻璃效果：
  • box-shadow: h-shadow(必须)  v-shadow(必须)  blur spread color inset;

文本溢出处理：

• demo:
  • overflow：主要在对高度的处理，如果宽度不够，默认会换行；
  • text-overflow：主要对宽度的处理，在设置white-space: nowrap; 阻止换行之后可以设置默认（clip）或省略（ellipsis）;

高级文字设置：

• 金属质感文字
  • linear-gradient: (direction, color-stop1, color-stop2, ...);

隐藏文本：

• 使用display;
• 使用opacity;
• 使用text-indent;

  h1{
     text-indent:-9999px
     ............
  }

• 使用定位；

  h1{
    position:absolute;
    top:-9999px;
    left:-9999px;
  }

文字旋转：

 -ms-transform: rotate(30deg); /* IE 9 */
 -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
  transform: rotate(30deg);

字体栈：

• demo