vue设置特定页面中使用自定义字体的实现方式

2023-11-11 311点热度 0人点赞 0条评论

某些场景下,需要使用自定义的字体,例如类似计算器的显示效果,还有用户的手机使用了卡通字体的效果,但是希望我们的应用还是需要显示传统的字体。

实现方式:

  • 准备好自定义字体包(后缀名为.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>

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论