DioDocs for PDF
カスタムフォント
PDFビューワ > PDFの編集 > エディタ > カスタムフォント

PDF ドキュメントを作成または編集するときに、デフォルトのフォントの代わりに、カスタムのフォントを使用する場合があります。PDFビューワでは、editorDefaults.fontNames オプションを使用して新しいフォントまたはカスタム フォントのリストからフォントを追加して使用できます。

editorDefaults.fontNames オプションを使用するには、次の前提条件を満たす必要があります。

新しいフォントまたはカスタムフォントの登録

次のサンプルコードは、CSS から 2 つのフォントを登録する方法を示しています。

コードのコピー 
// カスタムフォントを定義します。
<link rel="preload" href="budmo_jiggler.ttf" as="font" type="truetype" crossorigin>
<link rel="preload" href="FantaisieArtistique.ttf" as="font" type="truetype" crossorigin>
<style>
    @font-face {
        font-family: BudmoJiggler-Regular;
        src: url(/documents-api-pdfviewer/demos/product-bundles/assets/fonts/budmo_jiggler.ttf)  format('truetype');
    }
    @font-face {
        font-family: FantaisieArtistique;
        src: url(/documents-api-pdfviewer/demos/product-bundles/assets/fonts/FantaisieArtistique.ttf)  format('truetype');
    }
</style>

SupportAPI の構成

DsPdfViewer には、クライアント側のフォント名をサーバー側のフォントに関連付ける 3 つの異なる方法が用意されています。

ClientFonts 設定の使用

コードのコピー 
public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);
    GcPdfViewerHub.Configure(app);
    GcPdfViewerController.Settings.VerifyToken += VerifyAuthToken;
    GcPdfViewerController.Settings.Sign += OnSign;

    // ClientFonts プロパティは、クライアント側の各フォント名に関連付けられたフォントマッピングを保持します。
    GcPdfViewerController.Settings.ClientFonts.Add("BudmoJiggler-Regular", Font.FromFile("budmo_jiggler.ttf"));
    GcPdfViewerController.Settings.ClientFonts.Add("FantaisieArtistique", Font.FromFile("FantaisieArtistique.ttf"));
    GcPdfViewerController.Settings.ClientFonts.Add("Yu Gothic UI", Font.FromFile("yu_gothic_ui.ttf"));
}

DocumentInitialized イベントと FontCollection プロパティの使用

コードのコピー 
public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);
    GcPdfViewerHub.Configure(app);
    GcPdfViewerController.Settings.VerifyToken += VerifyAuthToken;
    GcPdfViewerController.Settings.Sign += OnSign;
    GcPdfViewerController.Settings.DocumentInitialized += OnDocumentInitialized;
}

private void OnDocumentInitialized(object sender, DocumentInitializedEventArgs e)
{
    // GcPdfDocument の FontCollection プロパティを使用して、 「FantaisieArtistique」 フォントを解決します。
    var doc = e.Document;
    
    // FontCollection インスタンスを作成します。
    FontCollection fc = new FontCollection();
    
    // RegisterFontメソッドを使用して、フォントファイルを取得します。
    string projectRootPath = HttpContext.Current.Server.MapPath("~");
    string fontPath = Path.Combine(projectRootPath, "assets/FantaisieArtistique.ttf");
    fc.RegisterFont(fontPath);
    
    // SupportApi を使用して、フォントコレクションに指定されたフォントを検索できるようにします。
    doc.FontCollection = fc;

}

ResolveFont イベントを使用してフォントの解決

コードのコピー 
public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);
    GcPdfViewerHub.Configure(app);
    GcPdfViewerController.Settings.VerifyToken += VerifyAuthToken;
    GcPdfViewerController.Settings.Sign += OnSign;
    GcPdfViewerController.Settings.ResolveFont += OnResolveFont;
}

private void OnResolveFont(object sender, ResolveFontEventArgs e)
{
    // ResolvedFont イベントの Argument プロパティを使用して、「BudmoJiggler- Regular」 フォントを解決します。
    string projectRootPath = HttpContext.Current.Server.MapPath("~");
    if (e.FontName == "BudmoJiggler-Regular")
    {
        string fontPath = Path.Combine(projectRootPath, "assets/budmo_jiggler.ttf");
        e.ResolvedFont = Font.FromFile(fontPath);
    }
}

カスタムフォントの設定

上記の前提条件を設定したら、次のように editorDefaults.fontNames オプションを使用してカスタムフォントを設定して PDF に適用します。

コードのコピー 
// フリーテキスト注釈のエディタのデフォルトを設定します。
viewer.options.editorDefaults.freeTextAnnotation = { fontName: 'FantaisieArtistique', borderStyle: { width: 0 } };

// フォント名を追加します。
viewer.options.editorDefaults.fontNames = [

        { name: 'Disco font', value: 'BudmoJiggler-Regular' },
        { name: 'Fantaisie font', value: 'FantaisieArtistique' }
    ];

 

 

© MESCIUS inc. All rights reserved.