Question

当前，在我的标准样式表中，我有：

@font-face {
    font-family: myFancyFont;
    src: url('myFancyFont.otf');
}

我在其他CSS声明中使用它，例如：

.someClass {
    font-size: 18px;
    font-family: myFancyFont;
}

一切正常，直到有人去打印页面为止，此时使用myFancyFont的任何内容都会以难看的字体打印出来。

请注意，字体看起来双线模糊。我的print.css文件确实将背景颜色从蓝色更改为灰色。

我是否可以将print.css文件中的myFancyFont重新定义为标准的网络安全字体（如Verdana），以便打印看起来更正常？

我假设如果我只是这样做，仍然可能会出现问题：

@font-face {
    font-family: myFancyFont;
    src: url('verdana.otf');  /*or a real version of the verdana font file*/
}

Answer 1

我是否可以将print.css文件中的myFancyFont重新定义为标准的网络安全字体（如Verdana），以便打印看起来更正常？

是的，您可以在打印样式表中重新定义自定义字体系列，以使用预先安装的Verdana，如下所示：

@font-face {
    font-family: myFancyFont;
    src: local('Verdana');
}

您的标准样式表中对myFancyFont的所有引用（如果不限于@media screen，将自动在印刷版中使用Verdana。

您需要确保在HTML中的标准样式表之后链接您的打印样式表，以便此@font-face规则将覆盖您的标准样式表。

请注意，“网络安全”不一定表示“在页面媒体中清晰可见”，尽管通常大多数网络安全字体确实都能清晰地打印出来。

Answer 2

我只会使用Verdana作为标准字体的@media print媒体查询，就像这样：

@media print {
  * {
    font-familiy: Verdana, sans-serif;
  }
}

此外，如果您在定义FancyFont时还有其他更特定的CSS规则，则也必须在此媒体查询中使用这些规则（更改为Verdana），或者在上述规则中使用!important。