Работа с пользовательскими шрифтами в FastReport Online Designer

В недавнем релизе FastReport Online Designer появилась возможность добавлять в отчет любые шрифты. Это нововведение позволяет разнообразить создаваемые отчеты.

Для того, чтобы использовать нестандартные шрифты, нужно:

• развернуть сервер шрифтов;
• определить настройки шрифтов с помощью css;
• добавить нужные шрифты и конфигурацию в FastReport WebReport;
• сконфигурировать FastReport Online Designer в Online Designer Builder.

Серверная часть

Начнем с сервера шрифтов. Он должен возвращать css-файл с настройками шрифта, в зависимости от запрашиваемого названия. Пример:

@font-face {
 font-family: 'Usually-font';
 src: url('http://localhost:58300/fonts/Usually-font.otf') format('opentype');
}

Дизайнер отправляет название запрашиваемого шрифта в GET-параметре family. Ниже приведен пример контроллера на ASP.NET:

namespace MyFontServer.Controllers
{
 [Route("fonts")]
 public class FontsController : Controller
 {
 IHostingEnvironment _hostingEnvironment;
 public FontsController(IHostingEnvironment hostingEnvironment)
 {
 _hostingEnvironment = hostingEnvironment;
 }
 public IActionResult Index(string family)
 {
 return new PhysicalFileResult(Path.GetFullPath($"wwwroot/fonts/{family}.css"), "text/css");
 }
 
 }
}

На этот контроллер будет идти запрос с параметром family - это название запрашиваемого шрифта. Ответом будет css-файл, в котором с помощью @font-face описан нужный шрифт. Также дизайнер посылает GET-параметр report_id, содержащий идентификатор текущего отчета.

Затем необходимо добавить файлы шрифтов в FastReport Web Report, используемый дизайнером. Например:

FastReport.Utils.Config.PrivateFontCollection.AddFontFile("wwwroot/fonts/Usually-font.otf");

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

Для того, чтобы шрифты были доступны для выбора в дизайнере, необходимо указать семейства в “get custom config”. Это переменная окружения, содержащая в себе адрес дополнительной конфигурации дизайнера. Значение этой переменной присваивается в FastReport Online Designer Builder:

Сама конфигурация может выглядеть так: 

{
 "font-names": [
 "Usually-font",
 "Liberation sans",
 "Excelorate-Font"
 ]
}

Конфигурация дизайнера в FastReport Online Designer Builder

Перейдем к настройке дизайнера. Открываем FastReport Online Designer Builder и находим раздел Config, где есть блок “use font server for custom fonts”.

Эта опция позволяет сконфигурировать дизайнер для работы с определенным сервером шрифтов. Здесь необходимо поставить флажок “use custom font server?” и задать адрес сервера шрифтов. Например: 

Результат

Теперь при запуске дизайнер получает список доступных шрифтов, благодаря конфигурации get custom config:

И затем при выборе нужного шрифта, загружает его с указанного сервера шрифтов:

Шрифт также работает при подготовке отчета благодаря тому, что он был добавлен в WebReport:

Подведем итог. Мы с вами сделали конфигурацию сервера шрифтов на ASP.NET, рассмотрели настройки back-end’а и front-end’а дизайнера. Также научились добавлять и конфигурировать пользовательские шрифты в FastReport Online Designer.