Font Awesome Pro в родном скрипте

Question

Я разрабатываю кроссплатформенное приложение с Nativescript, и я начал использовать Font Awesome Free для иконок.Для этого я включил файлы ttf в папку fonts и определил следующие классы в основном файле css:

.far {
    font-family: "Font Awesome 5 Free", fa-regular-400;
    font-weight: 400; 
}

.fab {
    font-family: "Font Awesome 5 Brands", fa-brands-400;
    font-weight: 400; 
}

.fas {
    font-family: "Font Awesome 5 Free", fa-solid-900;
    font-weight: 900; 
}

Пока все работает нормально, и я могу вставлять бесплатные иконки по их Unicodeв текстовом поле и присвоении виджета класса far, fab или fas.

Вот пример:

<Button value="4" row="1" col="4" text="&#xf3ed;" class="fas navbar-item" tap="onMenuItemTap"></Button>

Я пытался сделать то же самое с Fontawesome Pro, добавив otfфайлы в папке Fonts и определения следующих классов, но это не работает.

.far {
    font-family: "Font Awesome 5 Pro", fa-regular-400;
    font-weight: 400; 
}

.fab {
    font-family: "Font Awesome 5 Brands", fa-brands-400;
    font-weight: 400; 
}

.fas {
    font-family: "Font Awesome 5 Pro", fa-solid-900;
    font-weight: 900; 
}

.fal {
    font-family: "Font Awesome 5 Pro", fa-light-300;
    font-weight: 300; 
}

Не могли бы вы помочь мне с этим?Я связался с поддержкой ФА, но пока они не смогли мне помочь.

Answer 1

На данный момент NativeScript не может поддерживать несколько весов одного и того же имени шрифта.

См. https://github.com/NativeScript/NativeScript/issues/5920 - текущее решение состоит в том, чтобы вручную переименовать внутреннее имя шрифта (используя редактор шрифтов), чтобы оно имело другое имя.Итак, ваш CSS выглядит следующим образом (т.е. семейства шрифтов имеют обновленные имена)

.far {
    font-family: "Font Awesome 5 Pro", fa-regular-400;
    font-weight: 400; 
}

.fas {
    font-family: "Font Awesome 5 Pro Solid", fa-solid-900;
    font-weight: 900; 
}

.fal {
    font-family: "Font Awesome 5 Pro Light", fa-light-300;
    font-weight: 300; 
}

Одна небольшая заметка;если вы используете только пару символов из каждого из этих файлов шрифтов, гораздо лучше скопировать все эти символы в ваш собственный файл шрифтов.Объединение 4 больших файлов шрифтов увеличивает размер вашего приложения на приличную сумму.