Как импортировать стили шрифтов в проект vue js
Я пытаюсь реализовать определенный шрифт в моем проекте 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;
}
я сделал какую-нибудь ошибку?
Вам нужно будет использовать инструменты chrome dev, чтобы проверить и проверить, перезаписывается ли ваше семейство шрифтов в классе .router-link-active другими или нет. Если да, то вам нужно будет написать более конкретный селектор CSS для вашего элемента.
да, я хочу добавить эти шрифты ко всему моему проекту @Jebasuthan
@someone_that_needHelp Проверить мой ответ ниже
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете добавить шрифт в свой проект vue двумя способами.
Оценка 1:
Шаг 1: Создать отдельную папку для шрифтов внутри папки с ресурсами
Шаг 2: В папку шрифтов поместите свои шрифты
Шаг 3: Ссылка на шрифт в общей папке index.html
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
Оценка 2:
Шаг 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;
}
Шаг 3: Обратитесь к CSS внутри src/main.js
import './assets/css/style.css'
Для более подробной информации вы можете обратиться к Ссылка на проект Github
Вы хотите добавить стиль семейства шрифтов ко всему проекту?