進階篇之純css+字體實現五角星（半顆星）評分

1.前言 
之前寫了一篇實現五角星打分效果的demo。這個demo用來實現打分效果綽綽有余，那么有時候我們在統計評分的時候，就會有半顆星或者1/3顆星星這樣的那要如何實現呢？來來來，純字體+css實現！ 
2.詳情 
1.下載字體 webFontIcon 我不會把壓縮文件上傳，會的童鞋可以教教我，感謝賜教，這樣我就可以把字體上傳以供大家下載了。 
2.css樣式

        .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}
        *{margin:0; padding:0;}

        /*字體路徑按照你的路徑去修改*/
         @font-face {
            font-family: 'AlluraRegular';
            src: url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.eot'),
                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont?#iefix') format('embedded-opentype'), 
                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.woff') format('woff'),
                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.ttf') format('truetype'),
                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.svg#AlluraRegular') format('svg');
        }
        .starFive span {display: block;float: left;font-size: 25px; font-family: 'AlluraRegular';
            text-align: center;color: #888;width: 27px;height: 33px;line-height: 33px;
            margin-right: 5px;position: relative;overflow: hidden;white-space: pre;
         }
        .starFive span:before {position: absolute;
            left: 0;top: 0;display: block;width: 50%;
            content: attr(data-content);overflow: hidden;color: #F63;
        }
        .sF1 span:before{width: 70%;}
        .sF2 span:before{width: 50%;}
        .sF3 span:before{width: 40%;}
        .starFive .org_star {color: #F63;}
        .starFive b {font-weight: normal; line-height: 40px;
            font-size: 25px;color: #888;margin-left: 10px;
        }

3.html內容

<div>
      <p class='cleanfloat starFive sF1'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><b>4.7分</b></p>
      <p class='cleanfloat starFive sF2'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><b>3.5分</b></p>
      <p class='cleanfloat starFive sF3'><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><span>R</span><b>2.4分</b></p>
 </div>

4.效果展示 

 

3.總結 
這個IE8及以上等其他高版本瀏覽器都是支持的。是不是很實用的打分？如果是做數據查詢的時候，顯示這樣的打分，就可以用到了。如果覺得哪里需要改進的，還請多多賜教。學無止境，我希望得到大家的批評，才會有進步。一個人孤軍奮戰，感覺進步的慢。