項(xiàng)目中，想做一個(gè)白底藍(lán)字咐蚯，藍(lán)底白字的上傳進(jìn)度條童漩。
在網(wǎng)上搜索到一個(gè)方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="iplan" text="THIS"></div>
</body>
<style media="screen">
.iplan{
width:300px;
font:40px/100px arial;text-indent:100px;
background:#fbfbfc;color:#0BF;
position:relative;
}
.iplan:before{
content:attr(text);
}
.iplan:after{
content:attr(text);
position:absolute;left:0;
white-space:nowrap;overflow:hidden;
width:70%;transition:width 1s ease;
background:#0BF;color:#fbfbfc;
}
</style>
</html>
即要用到:before :after偽元素的content屬性。
但我要做的又有不同春锋，這個(gè)進(jìn)度條不僅僅有字矫膨，還有一個(gè)“??”的圖標(biāo)，這個(gè)??是給用戶取消上傳用的期奔。所以content里面還要包含一個(gè)“??”侧馅。
我的??用的是font-awesome的，在HTML用以下方式使用：
<i class="fa fa-times-circle" aria-hidden="true"></i>
那content里面是沒(méi)法加html代碼的呀呐萌，怎么辦呢馁痴？
因此，引出了字體的問(wèn)題肺孤。
通過(guò)查資料得知罗晕，在使用content的過(guò)程中， content:"我" 和 content:"\6211" 的含義是一樣的赠堵。也即是說(shuō)小渊，我們?cè)赾ontent里看到的字，其實(shí)也是一段16進(jìn)制的unicode編碼茫叭。
而font-awesome也正好是一套字體酬屉，只不過(guò)他的字體形狀是一些符號(hào)罷了。
去node_modules里的font-awesome.css去找揍愁，發(fā)現(xiàn)fa-times-circle對(duì)應(yīng)的編碼為'\f057'
.fa-times-circle:before {
content: "\f057";
}
我興高采烈地copy到我的項(xiàng)目中：
.uploading-file-container:before{
content: "\f057";
...
}
悲催地發(fā)現(xiàn)期望的圖標(biāo)結(jié)果沒(méi)有出來(lái)呐萨，只出現(xiàn)一個(gè)空白框。
由于之前項(xiàng)目有過(guò)引入open-sans字體的經(jīng)驗(yàn)莽囤，所以我推測(cè)是因?yàn)闆](méi)有引入字體導(dǎo)致谬擦。
于是我把node_modules里font-awesome對(duì)應(yīng)的fonts文件夾拷貝到項(xiàng)目的assets目錄下，同時(shí)在/assets/css里新建一個(gè)文件font-awesome.css烁登，模仿node_modules/font-awesome/css/font-awesome.css文件怯屉，引入字體:
代碼1:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
然后在我的uploaderComponent的<script>中倒入導(dǎo)入：
import '../assets/css/font-awesome.css'
然后刷新頁(yè)面，期望字體生效饵沧，結(jié)果發(fā)現(xiàn)依然是個(gè)丑陋的框。
為什么沒(méi)有生效呢赌躺，字體文件都引入了呀狼牺，之前open-sans就是這么做的呀。
然后我看了一眼@font-face 里的font-family: 'FontAwesome'礼患，大悟是钥，我不告訴css我使用的哪個(gè)font-family掠归，那它怎么知道如何渲染字體呢。于是我加上：
.uploading-file-container:before{
font-family: FontAwesome;
content: "\f057";
...
}
發(fā)現(xiàn)fa-times-circle這個(gè)icon終于生效悄泥。
后記：雖然最終沒(méi)有完成我想實(shí)現(xiàn)的效果虏冻，但是對(duì)如何使用字體有了更深刻的理解。無(wú)非就是
首先弹囚、拷貝字體文件到項(xiàng)目厨相，諸如.ttf``.woff``.woff2；
其次鸥鹉、創(chuàng)建css文件在@font-face下按上述方式(代碼1:)引入相應(yīng)字體蛮穿；
最終，就可以使用了毁渗。
====================================
相關(guān)資料：https://www.zhihu.com/question/22022905 践磅。
====================================
