某些场景下,需要使用自定义的字体,例如类似计算器的显示效果,还有用户的手机使用了卡通字体的效果,但是希望我们的应用还是需要显示传统的字体。
实现方式:
- 准备好自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),进入项目中在assets文件夹下建一个font文件夹,把字体文件放进去
- 把拿到的字体包放到font文件夹中接着创建一个font.css文件,内容如下(以pingfang字体为例):
@font-face { font-family: 'PingFang-RE'; /* 重命名字体名 */ src: url('pingfang.ttf'); font-weight: normal; font-style: normal; }
- 在需要的页面引入
<style lang="scss"> @import './assets/font/font.css'; #content { font-family: 'PingFang-RE'; font-weight: 400; } </style>
文章评论