Vue项目中使用自定义字体样式方式

在Vue项目中，你可以使用以下步骤来使用自定义字体样式：

1. 引入字体文件：首先，你需要将你的自定义字体文件添加到项目中。这些文件通常是.ttf或.woff格式。你可以将它们放置在项目的公共文件夹（public）中，或者如果你使用的是Webpack，你可以将它们放在你的资源文件夹（如src/assets）中。

2. 在CSS中添加字体声明：然后，在你的CSS文件或全局样式表中，你需要添加一个@font-face声明来引入你的自定义字体。@font-face声明包括字体名称、字体文件的位置和字体文件的格式。例如：

@font-face {  
  font-family: 'MyCustomFont';  
  src: url('~@/assets/fonts/my-custom-font.woff2') format('woff2'),  
       url('~@/assets/fonts/my-custom-font.woff') format('woff');  
  font-weight: normal;  
  font-style: normal;  
}

注意在上述代码中，~符号是 webpack 的别名，代表项目的根目录。如果你在public文件夹中放置了字体文件，那么你应该使用 url('/fonts/my-custom-font.woff2') 这样的路径。
3. 使用自定义字体：最后，你可以在你的CSS样式中使用自定义字体。只需将字体应用到你的元素上，如下所示：

.my-element {  
  font-family: 'MyCustomFont', sans-serif;  
}

这会将你的自定义字体应用到类为my-element的元素上。如果浏览器无法加载你的自定义字体，它会使用默认的sans-serif字体。