Vue项目添加自定义字体

367 阅读1分钟

Vue项目添加自定义字体.

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

image.png

定义字体

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

在组件中使用

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

image.png 看下效果

image.png