在项目中引入新字体,我的环境是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都能正常显示该字体

Logo

前往低代码交流专区

更多推荐