Шрифты так же важны для отчетов, как и для дизайна веб-сайта. Они напрямую влияют на пользовательский опыт. Многие многоязычные сайты, поддерживающие языки RTL и LTR, используют несколько шрифтов, и дизайнеры отчетов используют их в своих отчетах. Шрифты могут быть сложными в использовании в веб-средах, потому что существует так много шрифтов, которые доступны не на всех веб-платформах.

Чтобы любой контент правильно отображался в браузере (на всех платформах), разработчики должны убедиться, что шрифты существуют на целевом клиенте. ActiveReportsJS представляет простой способ объединения ссылок на шрифты в отчет, чтобы обеспечить плавную и безошибочную визуализацию отчета.

Отчеты о дизайне с пользовательскими шрифтами

При разработке отчета выберите свойство «Font Family» элемента управления, чтобы увидеть доступные шрифты для вашего отчета. Шрифты, перечисленные в раскрывающемся списке, поддерживаются по умолчанию.

Установить шрифты

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

  • Windows: перейдите в раздел Настройки › Персонализация › Шрифты.
  • MacOS: приложение Open Font Book
  • Linux: используйте командную строку для управления шрифтами

Наиболее распространенными типами файлов шрифтов, поддерживаемыми веб-браузерами, являются OTF, TTF и WOFF. Выберите один из них для надежной поддержки вашего веб-приложения.

Добавить шрифты в дизайнер

Конструктор ActiveReportsJS поддерживает набор шрифтов, перечисленных в файле fontsConfig.json. Этот файл устанавливается вместе с дизайнером. Обновите файл своими собственными элементами шрифта, чтобы использовать их в дизайнере с вашими отчетами.

Найдите этот файл в этих местах:

  • Windows: \AppData\Roaming\ActiveReportsJS Designer\
  • MacOS: /Library/Application Support/ActiveReportsJS Designer/
  • Linux: /.config/ActiveReportsJS Designer/

Обновите файл, указав новое имя шрифта и путь к файлу.

{  
    "path": "",  
    "descriptors": [  
               {  
                       ...  
               },  
        {  
            "name": "Webdings"  
        }  
    ]  
}

Закройте и снова откройте конструктор ActiveReportsJS. Выберите свойство «Font Family» для элемента управления TextBox, и новый добавленный шрифт появится в раскрывающемся списке.

Теперь вы можете оформлять отчеты с помощью нового шрифта.

Развертывание отчетов JavaScript с пользовательскими шрифтами

У каждого браузера свой набор поддерживаемых шрифтов. Когда пользовательский шрифт недоступен, браузер использует другой. Это создает несогласованность между браузерами. Создание пользовательских шрифтов, доступных для веб-приложений, решает эту проблему. Мы намечаем шаги ниже.

Добавить шрифты

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

Регистрация шрифтов

Каждый шрифт должен быть зарегистрирован в компоненте ActiveReportsJS в приложении, прежде чем отчет можно будет открыть. Создайте объект JSON для каждого шрифта, который вы хотите использовать.

Каждая запись должна включать следующие поля:

  • name: название шрифта.
  • locals: список шрифтов (приложение сначала будет искать эти шрифты локально).
  • source: URL-адрес источника шрифта.

В этом примере файлы шрифтов хранятся в папке fonts/.

const fonts = [  
    {  
        name: 'Webdings',  
        locals: ['webdings'],  
        source: 'fonts/webdings.ttf'  
    },  
    {  
        name: 'Gunplay',  
        locals: ['gunplay'],  
        source: 'fonts/gunplay.ttf'  
    }  
];

Используйте метод registerFont и передайте приведенный выше код шрифта в качестве аргумента.

...  
        viewer.registerFont(...fonts);  
        viewer.open('report/my-custom-font-report.rdlx-json');

Приведенный выше код загружает шрифты для средства просмотра, а затем открывает отчет.

Экспорт шрифтов

Вы можете экспортировать свои отчеты с пользовательскими шрифтами в HTML и Excel. Формат PDF в настоящее время не поддерживается.

Компромиссы использования пользовательских шрифтов

Хотя использование пользовательских шрифтов в JavaScript может добавить внешний вид, который вам нужен, у него есть некоторые недостатки.

  • Увеличенный размер приложения и более медленная загрузка:
  • Добавление шрифтов в ваше приложение или больших файлов отчетов увеличит размер пакета приложения. Пакеты большего размера имеют более длительное время начальной загрузки для приложений SPA. С ActiveReportsJS шрифты кэшируются, и проблема с производительностью будет очевидна только при первом запуске отчета.
  • Увеличено время рендеринга отчетов:
  • Шрифты должны быть зарегистрированы перед визуализацией отчета, что добавляет дополнительный шаг. Если шрифты загружаются динамически из удаленного источника, сеть может способствовать замедлению времени рендеринга.

Недостатки можно смягчить, но они являются ключевыми аспектами производительности вашего приложения и должны быть тщательно рассмотрены.

См. Демонстрация производительности для руководства по размерам отчетов, времени рендеринга и общей производительности отчетов.

Использование пользовательских шрифтов в приложениях для создания отчетов повышает качество отчетов и делает их более доступными. Просто имейте в виду затраты на производительность. Правильное обращение к ним делает это стоящим делом и значительно увеличивает читабельность для ваших пользователей.

от Троя Тейлора

Первоначально опубликовано на https://www.grapecity.com 24 июня 2020 г.