在项目中引入新字体

在项目中引入新字体，我的环境是vue+webpack其它环境操作应该差不多

1、下载需要的字体文件，我这里需要的是Let'sgo Digital Regular字体，下载压缩包里面只有一个.ttf文件，如果要兼容IE浏览器还需要IE专用文件，推荐在线转换网站https://www.fontsquirrel.com/tools/webfont-generator

上传压缩包里的ttf文件，下载下来的压缩包里有需要的.woff文件，也有相关的使用方法的css和HTML文件。

它的stylesheet.css文件里就有在项目中使用字体的方法

我自己项目里使用方法如下：

APP.vue文件里<style></style>下加入

@font-face {
  font-family: font_num;//给字体命名
  src: url("common/fonts/Let'sgo Digital Regular.ttf") format("truetype"),
  url("common/fonts/lets_go_digital_regular-webfont.woff2") format("woff"),
  url("common/fonts/lets_go_digital_regular-webfont.woff") format("woff");
  font-weight: normal;
}

这样在使用时直接用font-family:字体名就可使用

.counts-item span{font-family:font_num; }

经测试：IE10、11 Chrome Firefox都能正常显示该字体