Полное руководство по использованию пользовательских шрифтов в React Native | от Mehran Khan
Добавление пользовательских шрифтов в проект React Native — очень простая задача с помощью команды react-native link, но может быть сложной, если вы новичок в React Native.
Я решил написать статью о всех возможных проблемах , которые могут возникнуть при внедрении пользовательских шрифтов, и дать вам подробную информацию о том, как это будет работать.
Ниже приведены шаги для связывания шрифтов (с использованием команды React Native Link):
1. Первый шаг (Установка названия шрифта для кроссплатформенности)
Первый шаг — выбрать семейство шрифтов, которое вы хотите использовать в своем родном приложении React. Я решил использовать «SF UI Display» для своего примера тестового проекта.
Перед использованием необходимо проверить имя файла.
Android будет использовать имя шрифта, но в IOS будет использоваться «имя PostScript» . Это сложная часть, позвольте мне объяснить вам. Предположим, у меня есть вышеуказанные файлы шрифтов, и я использую «SFUIDisplayBold» в моем родном коде реакции , он будет работать в ANDROID, но не в IOS, потому что «имя постскриптума» — «SFUIDisplay-Bold» . Таким образом, для IOS вы должны использовать «SFUIDisplay-Bold» , несмотря на то, что вы добавили файл шрифта с именем «SFUIDisplayBold.otf»
. Вы можете проверить «имя постскриптума» файла шрифта в книге шрифтов.
После переименования ниже приведен список моих файлов шрифтов.
Примечание. Хотя вы можете добавить в свой код логику для использования «SFUIDisplayBold» для Android и «SFUIDisplay-Bold» для IOS, лучше переименовать шрифт.
Шаг 2: Добавьте шрифты в активы
Затем добавьте все файлы шрифтов, которые вы хотите, в каталог «assets/fonts» (он может варьироваться)
Шаг 3: Определите каталог активов
, если Версия React Native ≥ 0,60 ( Detail )
Создайте файл «react-native.
config.js» и добавьте следующий код
, если версия React Native < 0,60 native где находятся наши пользовательские шрифты. Добавление следующих строк в ваш package.json
Путь может быть другим. если у вас есть папка «src» и вы хотите поместить ресурсы в папку «src», тогда путь будет «.src/assets/fonts/»
Шаг 4. Связывание ресурсов с использованием собственной ссылки
Для Версия React Native ≥ 0,69
Из-за автоматического связывания команды связывания и удаления были удалены в React Native 0.69.
Запуск в терминале
npx react-native-asset
Для версии React Native < 0,69
$ npx react-native link
Команда link связывает шрифты в Info.plst для IOS и создает каталог шрифтов (android/app/src/main/assets/fonts) для Android, куда копирует ваши шрифты
Шаг 5: Используйте шрифт в React Native Styles
Наконец, вы можете использовать шрифт в стилях, добавив «fontFamily»
Сравнение рядом друг с другом После добавления «fontFamily» в стиле
5 9 нативная ссылка, вы должны увидеть что-то подобное в своем терминале
Эта команда сделает за вас всю тяжелую работу.
Создайте папку «Ресурсы» в проекте xcode, скопируйте файлы в папку «Ресурсы» , добавьте шрифты в «info.plist» в, создаст каталог шрифтов (android/app/src/main/assets/fonts) для Android
Нет команды для отмены связи (удаления) активов, вы должны сделать это вручную. Поэтому, если вы хотите отменить привязку (удалить) шрифты или добавить шрифты вручную, не реагируя на собственную команду ссылки, выполните шаги 9.0005
Шаг 1: Добавить/удалить шрифты в проект Android в следующем каталоге
android/app/src/main/assets/
Шаг 2: Добавить/удалить шрифты в папку «Ресурсы» в проекте xcode Примечание. Просто перетащите шрифты в папку «Ресурсы» xcode и установите флажок «Копировать элементы, если необходимо». Добавить в цель должен быть ваш проект. Подробнее см. ссылку
, если файлы скопированы правильно, вы можете увидеть файлы в «Копировать ресурсы пакета» на вкладке «Фазы сборки»
В случае удаления удалите его из ресурсов комплекта
Шаг 3: Добавьте/удалите шрифты в файлах info.
plist в проекте xcode с помощью ключа «Шрифты, предоставленные приложением»
Вы можете увидеть код моего демонстрационного проекта на Github . Я старался изо всех сил дать вам подробную информацию о том, как использовать пользовательские шрифты. Спасибо, что прочитали мою статью. Пожалуйста, похлопайте, если вам понравилось!
Преобразование шрифтов .TTF и .OTF в .WOFF — tony redhead
В учебнике «Стили текста с помощью CSS и локальных шрифтов» шрифты, которые я использую, имеют формат файла .WOFF. В этом руководстве описывается процесс преобразования с использованием онлайн-конвертера, разработанного Эндрю Саном , для создания шрифтов, подходящих для использования в руководстве
. Использование определенных или пользовательских шрифтов является одним из наиболее привлекательных аспектов CSS3 для дизайнеров, создающих скины в Pano2VR. С помощью правила @font-face вы можете отображать любой шрифт, который у вас есть в сети, в тексте, независимо от того, установлен он у пользователя или нет.
Есть ряд шрифтов, поддерживаемых разными браузерами, но для своих проектов я предпочитаю WOFF.
Поддержка браузера
Правило @font-face поддерживается в Internet Explorer, Firefox, Opera, Chrome и Safari.
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает формат шрифта.
*Edge и IE: формат шрифта работает только в том случае, если установлено значение «устанавливаемый».
*Firefox: отключен по умолчанию, но может быть включен (необходимо установить флаг «true», чтобы использовать WOFF2).
Онлайн-конвертеры шрифтов
Существует ряд онлайн-конвертеров, которые вы можете использовать. В этом примере я использую WOFFer by Эндрю Сан по адресу https://andrewsun.com/tools/woffer-woff-font-converter/
О
WOFFer — это инструмент для преобразования TTF или OTF в WOFF и обратно в TTF или OTF. WOFF, сокращение от Web Open Font Format, представляет собой специальный формат шрифта, сжатый и оптимизированный для использования в Интернете.
Этот формат сжимает данные шрифта с помощью zlib, что может значительно уменьшить размер шрифта для более быстрой загрузки.
Начало работы
1. Откройте веб-адрес, и вы увидите инструмент преобразования (показан выше) и окно «WOFFer Перетащите файлы сюда»
Примечание. Я только что просмотрел этот учебник и столкнулся с некоторыми проблемами при конвертации через WOFFer на Mac как в версии Chrome 75.0.3770.100, так и в Firefox 67.0.4, так как ни одна из них не распознавала опцию перетаскивания или выбора файлов. Однако Safari распознал перетаскивание и преобразовал файлы OTF. Любая обратная связь будет оценена.
Альтернативный конвертер, FontSquirrel работал, ссылка есть внизу туториала.
2. В этом примере я буду использовать шрифт Calibri и три стиля: Bold, Light и SemiBold 9.0005
3. Перетащите файлы в окно Drag and Drop, WOOFer начнет обработку файлов и обновит страницу после завершения преобразования
4.