DinkToPdf 不在 Azure 环境中呈现图标

问题描述

我使用 DinkToPdf library 从 HTML 文件生成 PDF 文件。当我在本地启动代码时，它按预期工作，但在 Azure 环境中，PDF 文件中的图标丢失，字体看起来有颗粒感：

图标通过 css 中的 font-face 规则嵌入到源 HTML 文件中：

        @font-face {
            font-family: 'icons';
            src: url("./fonts/icons.eot");
            src: url("./fonts/icons.eot#iefix") format("embedded-opentype"),url("./fonts/icons.woff2") format("woff2"),url("./fonts/icons.ttf") format("truetype");
            font-weight: normal;
            font-style: normal;
        }

        .icon [class^="ic_"]:before,.icon [class*=" ic_"]:before {
            font-family: "icons";
            font-size: 24px;            
            display: inline-block;
            text-align: center;
            font-variant: normal;
            text-transform: none;
            line-height: 1em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon .ic_location:before {
            content: '\e822';
        }

        .icon .ic_calender:before {
            content: '\e80b';
        }

这是 HTML：

    <div class="header-container">
        <div>
            <div class="name">
                <span class="icon">
                    <i class="ic_calender"></i>
                </span>
                <span class="color-black ml12px fs32px fw700">Molly</span>
            </div>
        </div>

        <div class="header-bottom-block">
            <div class="location">
                <span class="icon">
                    <i class="ic_location"></i>
                </span>
                <span class="color-black ml12px fs24px fw500">West</span>
            </div>
        </div>
    </div>

当我用 PNG 图像替换 @font-face 中的样式时，图标以 PDF 格式显示，因此问题解决了：

        .icon .ic_location {
            content: url('location-icon.png');
            height: 24px;
            width: 24px;
        }

但是可能有更优雅的解决方案吗？这是否与 wkhtmltopdf 库在 Azure 中的工作方式不同有关？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）