Vue项目添加自定义字体

Vue项目添加自定义字体.

1. 把字体文件放到assets或者public目录
2. 在全局css文件或组件里定义字体
3. 在组件中使用

定义字体

@font-face {
  font-family: 'youSheFont'; // 定义的字体名称
  src: url('@/assets/fonts/优设标题黑.ttf') format('truetype'); // 字体路径
  font-weight: normal;
  font-style: normal;
}

在组件中使用

.text {
  font-family: 'youSheFont'; // 和定义的字体名称一致
}

看下效果