首页 / 大前端 / vue中使用@font-face定义本地字体

vue中使用@font-face定义本地字体

2021-01-01 01:01 大前端 阅读 2221 来源

很多小伙伴在使用vue开发项目的时候，需要用到特殊字体，而在scss或less中使用@font-face这个属性时，会报各种错误。

如下示例


@font-face {
  font-family: myFont;   //此处代表给你引入的字体起一个名字
  src: url('../../assets/css/georgiab.ttf');
}

这样引用的时候往往会报错


报错的原因往往都是因为项目中使用了sass或者less的原因，所以我们只需要在组件的style部分来定义@font-face这个属性

<style scoped>
@font-face {
  font-family: myFont;
  src: url('../../assets/css/georgiab.ttf');
}
</style>


赞同534
vue   外部字体  

猜你喜欢