如何在vue js项目中导入字体样式

Question

我正在尝试在我的 vue 项目中实现某些字体，但该字体似乎无法正常工作，这就是我在 App.vue 文件中本地导入字体的方式

@font-face {
  font-family: "Open Sans Bold";
  src: local("OpenSans-Bold"), url("./fonts/OpenSans-Bold.ttf"), format("truetype");
  font-weight: bold;
}'

这就是我在 Home.vue 文件中使用它的方式

 .router-link-active{
      font-family: "Open Sans Bold";
      color: #5F5F5F !important;
      text-decoration: underline;
      text-underline-position: under;
      text-decoration-thickness: 3px;
    }

我有没有搞错？

Answer 1

您可以使用两种方法将字体添加到您的 vue 项目中。

方法 1：

步骤 1：在资产文件夹中为字体创建一个单独的文件夹

第 2 步： 在字体文件夹下放置您的字体

第三步：参考public文件夹中的字体index.html

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>

方法二：

第 1 步：在资产文件夹中为 css

创建一个单独的文件夹

第 2 步： 在 css 文件夹下新建 style.css 并放置您的字体样式

@font-face { 
  font-family: "Open Sans Bold";
  src: local("OpenSans-Bold"), url("./fonts/OpenSans-Bold.ttf"), 
  format("truetype");
  font-weight: bold;
}

第三步：参考src/main.js

里面的css

import './assets/css/style.css'

详情请参考Github Project Link

如何在vue js项目中导入字体样式

how to import font styling in vue js project

javascript

css

fonts

vue.js