Verwenden von benutzerdefinierten Schriftarten mit FastReport Online Designer

2021-12-20

FastReport Online Designer

Das neue Release von FastReport Online Designer ermöglicht es, beliebige Schriftarten zum Bericht hinzuzufügen. Dies ermöglicht das Erstellen vielfältiger Berichte.

Hinzugefügte Schriftarten

Um benutzerdefinierte Schriftarten anzuwenden, benötigen Sie:

  • den erforderlichen Serversoftware zu installieren;
  • die Schriften mit CSS zu formatieren;
  • die erforderlichen Schriftarten und Konfigurationen in FastReport WebReport hinzuzufügen;
  • FastReport Online Designer in Online Designer Builder zu konfigurieren.

Schriftartenserver

Nehmen wir den Schriftartenserver. Dieser sollte eine CSS-Datei mit der Konfiguration der Schriftart entsprechend dem angeforderten Namen zurücksenden. Zum Beispiel:

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

Der Designer sendet den Namen der gewünschten Schriftart in den GET-Parameter „family“. Hier ist ein Beispiel für einen Controller in 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");
 }
 
 }
}

Eine Anfrage wird an diesen Controller mit dem Parameter „family“, nämlich dem Namen der gewünschten Schriftart, gesendet. Als Ergebnis wird eine CSS-Datei erstellt, die mit @font-face die gewünschte Schriftart beschreibt. Der Designer sendet auch einen GET-Parameter report_id, der die ID des aktuellen Berichts enthält.

Die Schriftdateien müssen dann zum FastReport Web Report hinzugefügt werden, der vom Designer verwendet wird. Zum Beispiel:

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

Hiermit wird sichergestellt, dass beim Erstellen der Berichte die entsprechende Schriftart verwendet wird.

Damit die Schriftarten im Designer zur Auswahl gestellt werden können, muss der Parameter „family“ in „get custom config“ angegeben werden. Diese Umgebungsvariable enthält die URL der zusätzlichen Konfiguration des Designers. Der Wert dieser Variable wird in FastReport Online Designer Builder zugewiesen:

Konfiguration „get custom config” in FastReport Online Designer Builder

Die Konfiguration kann wie folgt lauten: 

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

Konfiguration des Designers im FastReport Online Designer Builder

Zunächst wird der Designer konfiguriert. Öffnen Sie den FastReport Online Designer Builder und finden Sie den Config-Bereich mit dem „use font server for custom fonts“ Block.

Konfiguration „use custom font server” in FastReport Online Designer Builder

Mit dieser Option können Sie den Designer für die Verwendung bestimmter Schriftartenserver konfigurieren. Setzen Sie hier ein Häkchen bei „use custom font server?“ und geben Sie die URL des Schriftartenserver ein. Zum Beispiel: 

Konfiguration „use custom font server” in FastReport Online Designer Builder

Ergebnis

Der Designer verfügt über eine Liste der verfügbaren Schriftarten beim Start mittels der Funktion get custom config:

Liste der verfügbaren Schriftarten

Dann wird die entsprechende Schriftart von dem angegebenen Schriftartenserver heruntergeladen, wenn Sie sie auswählen:

Serveranfrage nach Konfiguration von Schriftart

Serveranfrage nach Schriftart

Da Sie die Schriftart zu WebReport hinzugefügt hatten, funktioniert sie beim Erstellen des Berichts:

Neue Schriftart beim Erstellen der Berichte

Zum Schluss noch eine Zusammenfassung. Wir haben die Konfiguration von dem ASP.NET- Schriftartenserver erstellt und uns die Konfiguration vom Backend- und Frontend-Entwickler angesehen. Zudem haben wir erlernt, wie man benutzerdefinierte Schriftarten im FastReport Online Designer hinzufügt und konfiguriert.

20. April 2023

How to update FastReport Online Designer to the latest version

Step-by-step instructions for updating FastReport Online Designer to the latest version via the client panel.
14. März 2023

Zukunft der mit Blazor WebAssembly generierten Berichte

Schritt-für-Schritt-Anleitung zum Erstellen einer Demo-Anwendung auf .NET 6 und 7 direkt im Browser mit Blazor WebAssembly in FastReport .NET.
7. März 2023

Konfigurieren einer API für das Build von FastReport Online Designer

Wir sprechen über die Automatisierung des Erstellungsprozesses von FastReport Online Designer Builder über die API, wenn die Produktversion geändert wird.
Fast Reports
  • 800-985-8986 (Englisch, die USA)
  • +4930568373928 (Deutsch)
  • +55 19 98147-8148 (Portugiesisch)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314

© 1998-2024 Fast Reports Inc.