1. 下载.ttf字体文件到本地,放在src中的assets文件下
2. 引入字体
在css文件中引入字体
@font-face {
font-family: 'led regular';
src: url('../fonts/led/DIGITAL-Regular.ttf');
}
3. 新字体的使用
<div class="time">{{currTime}}</div>
.time {
color: "#ccc";
display: inline;
font-family: "led regular";
font-size: 26px;
}
提示:本项目使用的是vue-cli搭建的基础框架,
webpack.base.conf.js
配置文件中已经配置好了,直接如上步骤使用即可,若是其他框架则需要检查一下webpack.base.conf.js
配置文件中以下配置是否包括ttf格式。
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},