字体真棒图标仅以黑色打印



我正在开发一个网站,该网站必须打印包含字体真棒图标的页面。问题是,当你去打印时,字体真棒图标将不会以彩色打印。

在浏览器中,它们以彩色显示,但当打印页面时,图标是纯黑色的。有没有办法让字体真棒图标打印成彩色?也许通过CSS和@media print{}?

编辑:另外,我正在firefox中进行开发。

事实证明,您实际需要着色的项目不是i本身,而是它的:before元素。因此:

<style type="text/css">
  .fa:before { color:red; }
</style>

如果您使用引导程序,您需要编辑其CSS,因为它为"@media print"指定了黑色

我刚刚用字体做了一个简单的HTML示例,它在Chrome和Firefox中运行得很好。我在屏幕上看到了红色的图标,它也以红色打印,没有任何进一步的操作。话虽如此,如果HTML页面有保证,创建一个单独的媒体CSS是个好主意,因为它可以提供更好的用户体验(屏幕视图并不总是打印的理想选择)。

您确定没有将打印机设置修改为不使用彩色打印吗?打印机是否脱离了该颜色,因此默认为纯黑色?你在其他浏览器(Chrome、Safari、Opera、IE)中尝试过吗?

以下是我用于测试的简单代码:

<html>
	<head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
		<title>Fontawesome Test</title>
		<style type="text/css">
			.fa { color:red; }
		</style>	
	</head>
	<body>
		<i class="fa fa-camera-retro">  Testing color</i>  fa-camera-retro 
	</body>
</html>

最新更新