在项目中引入新字体
在项目中引入新字体,我的环境是vue+webpack其它环境操作应该差不多1、下载需要的字体文件,我这里需要的是Let'sgo Digital Regular字体,下载压缩包里面只有一个.ttf文件,如果要兼容IE浏览器还需要IE专用文件,推荐在线转换网站https://www.fontsquirrel.com/tools/webfont-generator上传压缩包里的ttf文件,下载下来的压缩
在项目中引入新字体,我的环境是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都能正常显示该字体
更多推荐
所有评论(0)