1文字与字体

1.1自定义文字（@font-face）

格式：

@font-face{
font-family: "xujinglei"; /*自定义名字*/
/*其值主要有以下几种类型：truetype（.ttf）,opentype（.otf）,Web Open Font Format（.woff）,embedded-opentype（.eot）,SVG(.svg)等*/
src: url('font/xujinglei.ttf') format("truetype"), /* Safari, Android, iOS */
url("font/xujinglei.eot"),/* IE9 Compat Modes */
url("font/xujinglei.eot?#iefix") format('embedded-opentype')/*IE6-IE8*/;
/*url('YourWebFontName.woff') format('woff'),*/ /* Modern Browsers */;
/*url('YourWebFontName.svg#YourWebFontName') format('svg')*/; /* Legacy iOS */
}

@font-face{
    font-family: "xujinglei"; /*自定义名字*/
/*.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】*/
    src: url('font/xujinglei.ttf') format("truetype"), /* Safari, Android, iOS */
         url("font/xujinglei.eot"),/*  IE9 Compat Modes */
         url("font/xujinglei.eot?#iefix") format('embedded-opentype')/*IE6-IE8*/;
         /*url('YourWebFontName.woff') format('woff'),*/ /* Modern Browsers */;
         /*url('YourWebFontName.svg#YourWebFontName') format('svg')*/; /* Legacy iOS */
}

<!--1、自定义文字-->
<p class="font">自定义文字：很开心哦！</p>

1.2文字首字下沉（first-letter）

.down:first-letter{
    font-size: 24px;
    color: red;
    float: left;
}
<!--2、首字下沉-->
<p class="down">段落文字首字下沉</p>

1.3文本被选中的样式（::selection）

.select::selection{
     background:beige;
     color: red;
 }
<!--3、文本被选中的样式-->
<p class="select">文本被选中后背景变成草绿色，字变成红色</p>

 

1.4调整文字字符间距

p.wordSpace{word-spacing: 20px;}
p.letterSpace{letter-spacing: 20px;}
p.whiteSpace_pre{white-space: pre;}
p.whiteSpace_prewrap{white-space: pre-wrap;}
p.whiteSpace_preline{white-space: pre-line;}
<!--4、调整文字字符间距-->
        <p>普通的文字</p>
        <p class="wordSpace">控 制 空 格 长 度</p>
        <p class="letterSpace">控制两个相邻文字的间距</p>
        <p>空格默认处理，浏览器会把多个空格符                                                       默认为1个</p>
        <p class="whiteSpace_pre">空格符处理，浏览器会保留                       多个空格符</p>
        <p>浏览器会忽略
            回车符</p>
        <p class="whiteSpace_prewrap">让浏览器保留多个              空白符，保留
回车符</p>
        <p class="whiteSpace_preline">让浏览器不保留多个              空白符，保留
回车符</p>

 1.5文字的阴影

p.text-shadow{text-shadow: 4px 4px 10px red;}
<!--5、文字的阴影-->
<p class="text-shadow">文字的阴影效果</p>

1.6文字高斯模糊

p.vague{
     width: 300px;
     height: 100px;
     border: 1px solid black;
     padding: 10px;
     text-shadow: 4px 4px 10px black;
     color: rgba(0,0,0,0);
     font-size: 26px;
     }
<!--6、文字高斯模糊-->
<p class="vague">文字高斯模糊状态</p>

 1.7金属质感的文字

<!--7、金属质感的文字-->
<p style="background: black; color: white; font-size: 30px; position: relative; font-weight: bold;">
    <span style="width: 100%; height: 100%; position: absolute;  background: linear-gradient(to bottom,black 0%,transparent 50%,black); opacity: 0.5;"></span>
    金属质感的文字
</p>

1.8隐藏文字

<!--8、隐藏文字-->
.hidden-text{
    width: 584px;
    height: 288px;
    background: url(img/baidu.jpg);
    text-indent: -999px;
}
.hidden-txt{
    width: 584px;
    height: 288px;
    background: url(img/baidu.jpg);
    position: relative;
}
方法一：
<h1 class="hidden-text">百度一下</h1>
方法二：
<div class="hidden-txt"><span style="position: absolute; top: -999px; left: -999px;">百度一下，隐藏文字</span></div>