0

我正在使用DinkToPdf 库从 HTML 文件生成 PDF 文件。当我在本地启动代码时，它按预期工作，但在 Azure 环境中，PDF 文件中的图标丢失并且字体看起来很粗糙：

font-face这些图标通过css 中的规则嵌入到源 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 中的工作方式不同有关吗？

4

0 回答 0