效果如下：
 |
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;} *{margin:0; padding:0;} /*字体路径按照你的路径去修改*/ @font-face { font-family: 'AlluraRegular'; src: url('fonts/websymbols-regular-webfont.eot'), url('fonts/websymbols-regular-webfont?#iefix') format('embedded-opentype'), url('fonts/websymbols-regular-webfont.woff') format('woff'), url('fonts/websymbols-regular-webfont.ttf') format('truetype'), url('fonts/websymbols-regular-webfont.svg#AlluraRegular') format('svg'); } .starFive span {display: block;float: left;font-size: 15px; font-family: 'AlluraRegular'; text-align: center;color: #888;16px;height:23px;line-height: 23px; margin-right: 5px;position: relative;overflow: hidden;white-space: pre; } .starFive span:before {position: absolute; left: 0;top: 0;display: block; 50%; content: attr(data-content);overflow: hidden;color: #F63; } .sF1 span:before{42%;} .sF2 span:before{96%;} .sF3 span:before{50%;} .starFive .org_star {color: #F63;} .starFive b {font-weight: normal; line-height: 40px; font-size: 25px;color: #888;margin-left: 10px; } </style> </head> <body> <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> </body> </html>
下载的字体：字体文件下载