vue中引入digital-液晶数字字体

1. 下载.ttf字体文件到本地，放在src中的assets文件下

image.png

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;
}

image.png

提示：本项目使用的是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]')
        }
      },