html 使用自定义字体打印不起作用

xxslljrj 于 5个月前发布在其他

关注(0)|答案(5)|浏览(71)

我创建了一个网页与自定义字体，我可以看到字体应用在浏览器中，但它不适用于打印页面。
我按照下面的方式打印：
fonttest.css文件包含以下内容：

@font-face {
font-family: "myriad";
src: url("../fonts/myriad.otf") format('truetype');
}
@font-face {
font-family: "serifa-bold";
src: url("../fonts/serifa_bold.ttf") format('truetype');
}
@font-face {
font-family: "serifa";
src: url("../fonts/serifa.ttf") format('truetype');
}
@font-face {
font-family: "AlexandriaFLF";
src: url("../fonts/AlexandriaFLF.ttf") format('truetype');
}
@font-face {
font-family: "AlexandriaFLF-Bold";
src: url("../fonts/AlexandriaFLF-Bold.ttf") format('truetype');
}
@font-face {
font-family: "AlexandriaFLF-BoldItalic";
src: url("../fonts/AlexandriaFLF-BoldItalic.ttf") format('truetype');
}
@font-face {
font-family: "AlexandriaFLF-Italic";
src: url("../fonts/AlexandriaFLF-Italic.ttf") format('truetype');
}

字符串
在HTML文件中，CSS文件链接如下：

<link rel='stylesheet' type='text/css' media='all'  href='resource/css/fonttest.css' />

型
我打印了以下行：

<p style="font-family:myriad;color:#000000">myriad-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa-bold;color:#000000">serifa-bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa;color:#000000">serifa-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF;color:#000000">AlexandriaFLF-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Italic;color:#000000">AlexandriaFLF-Italic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Bold;color:#000000">AlexandriaFLF-Bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-BoldItalic;color:#000000">AlexandriaFLF-BoldItalic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>

型
请帮帮我

Html

来源：https://stackoverflow.com/questions/13467295/printing-with-my-custom-fonts-is-not-working

5条答案

按热度按时间

zaqlnxep1#

尝试将您的stylish media属性设置为print：

<link rel='stylesheet' type='text/css' media='print'  href='resource/css/fonttest.css' />

字符串

赞(0）回复(0）举报 5个月前

p1iqtdky2#

如果你找不到一个方法来做到这一点，有一个替代品。
您可以使用wkhtml2pdf并创建可打印的PDF文件。

赞(0）回复(0）举报 5个月前

w6lpcovy3#

也许你需要在你的css中包含更多的字体格式。像这样：

@font-face {
font-family: 'XXXXX';
src: url('XXXXX.eot');
src: url('XXXXX.eot?#iefix') format('embedded-opentype'),
     url('XXXXX.woff') format('woff'),
     url('XXXXX.ttf') format('truetype'),
     url('XXXXX.svg#XXXXX') format('svg');
font-weight: normal;
font-style: normal;

}

字符串

赞(0）回复(0）举报 5个月前

z9zf31ra4#

url https://bugzilla.mozilla.org/show_bug.cgi?id=468568解释了为什么打印不适用于自定义字体，所以我在firefox-20.0a1.en-US.win32.installer.exe中进行了测试。ttf和otf的字体完全按照它应该的那样应用。

赞(0）回复(0）举报 5个月前

rkttyhzu5#

printWindow.document.write(`
      <html>
  <head>
    <title>Print</title>
    <style>
    @font-face {
      font-family: 'Founders Grotesk', sans-serif;
      src: url("path-to-custom-font") format("opentype");
      font-weight: 300;
    }
    @font-face {
      font-family: 'Founders Grotesk', sans-serif;
      src:url('path-to-custom-font') format("opentype");
      font-weight: 400;
    }
    @font-face {
      font-family: 'Founders Grotesk', sans-serif;
      src:url('path-to-custom-font') format("opentype");
      font-weight: 500;
    }
    @font-face {
      font-family: 'Founders Grotesk', sans-serif;
      src:url('path-to-custom-font') format("opentype");
      font-weight: 700;
    }

      @media print {
        @font-face {
          font-family: 'Founders Grotesk', sans-serif;
          src: url("path-to-custom-font") format("opentype");
          font-weight: 300;
        }
        @font-face {
          font-family: 'Founders Grotesk', sans-serif;
          src:url('path-to-custom-font') format("opentype");
          font-weight: 400;
        }
        @font-face {
          font-family: 'Founders Grotesk', sans-serif;
          src:url('path-to-custom-font') format("opentype");
          font-weight: 500;
        }
        @font-face {
          font-family: 'Founders Grotesk', sans-serif;
          src:url('path-to-custom-font') format("opentype");
          font-weight: 700;
        }
        
        body {
          font-family: 'Founders Grotesk', sans-serif;
        }
      }

      body {
        font-family: 'Founders Grotesk', sans-serif;
      }
    </style>
  </head>
  <body onload="window.print();window.close()">${content-you-want-to-send-in-print-file}</body>
  </html>`);
printWindow.document.close();
setTimeout(() => {
  printWindow.print();
  printWindow.close();
}, 5000);

字符串
对我来说，它的工作，当我指定的自定义字体在单独的风格，以及 Package 在打印媒体样式表。所以，当你写的打印功能代码尝试这种方式。在这里，我也添加延迟字体家族加载。

赞(0）回复(0）举报 5个月前

我来回答

html 使用自定义字体打印不起作用

5条答案

相关问题

热门标签

最新问答