项目中，想做一个白底蓝字，蓝底白字的上传进度条。
在网上搜索到一个方案：
<!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属性。
但我要做的又有不同，这个进度条不仅仅有字，还有一个“✖️”的图标，这个✖️是给用户取消上传用的。所以content里面还要包含一个“✖️”。
我的✖️用的是font-awesome的，在HTML用以下方式使用：
<i class="fa fa-times-circle" aria-hidden="true"></i>
那content里面是没法加html代码的呀，怎么办呢？
因此，引出了字体的问题。
通过查资料得知，在使用content的过程中， content:"我" 和 content:"\6211" 的含义是一样的。也即是说，我们在content里看到的字，其实也是一段16进制的unicode编码。
而font-awesome也正好是一套字体，只不过他的字体形状是一些符号罢了。
去node_modules里的font-awesome.css去找，发现fa-times-circle对应的编码为'\f057'
.fa-times-circle:before {
content: "\f057";
}
我兴高采烈地copy到我的项目中：
.uploading-file-container:before{
content: "\f057";
...
}
悲催地发现期望的图标结果没有出来，只出现一个空白框。
由于之前项目有过引入open-sans字体的经验，所以我推测是因为没有引入字体导致。
于是我把node_modules里font-awesome对应的fonts文件夹拷贝到项目的assets目录下，同时在/assets/css里新建一个文件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>中倒入导入：
import '../assets/css/font-awesome.css'
然后刷新页面，期望字体生效，结果发现依然是个丑陋的框。
为什么没有生效呢，字体文件都引入了呀，之前open-sans就是这么做的呀。
然后我看了一眼@font-face 里的font-family: 'FontAwesome'，大悟，我不告诉css我使用的哪个font-family，那它怎么知道如何渲染字体呢。于是我加上：
.uploading-file-container:before{
font-family: FontAwesome;
content: "\f057";
...
}
发现fa-times-circle这个icon终于生效。
后记：虽然最终没有完成我想实现的效果，但是对如何使用字体有了更深刻的理解。无非就是
首先、拷贝字体文件到项目，诸如.ttf``.woff``.woff2；
其次、创建css文件在@font-face下按上述方式(代码1:)引入相应字体；
最终，就可以使用了。
====================================
相关资料：https://www.zhihu.com/question/22022905 。
====================================
网友评论