Обратите внимание, как vue3 представляет сторонние шрифты.

На этот раз использован бесплатный шрифт Alibaba, который бесплатен для коммерческого использования. Давайте начнем сегодняшнее руководство без лишних слов.

1. Откройте официальный сайт iconfont.

2. Выберите шрифт, соответствующий вашим требованиям, и загрузите пакет шрифтов.

3. Как использовать

1. Разархивируйте, затем создайте папку шрифтов в ресурсах проекта и поместите в нее шрифт, который вы хотите использовать в распакованном пакете.

Например: я выбираю шрифтAlibaba_PuHuiTi_2.0_55_Regular_55_Regular

2. Создайте файл font.css и импортируйте его.

семейство шрифтов соответствует имени используемого вами шрифта

@font-face {
    
    
    font-family: "Alibaba_PuHuiTi_2.0_55_Regular_55_Regular";
    src: url('./Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf');
    font-weight: normal;
    font-style: normal;
  }

3. Введите App.vue.

Для приложения корневой метки это означает, что весь проект использует этот шрифт.

#app {
    
    
  font-family: "Source_Han_Serif_CN_VF_Regular";
}

4. Практика проверки

ок, относись спокойно.