使用 Open Sans 字体时，Chrome 在首次打印时无法正确打印

Posted 2023-03-06

【中文标题】使用 Open Sans 字体时，Chrome 在首次打印时无法正确打印

【英文标题】：Chrome Not Printing Correctly On First Print When Using Open Sans Font

【发布时间】：2016-01-28 19:05:22

【问题描述】：

更新问题

所以，我找到了导致此问题的原因。事实上，正如this question 中所建议的那样，它是开放式的。现在我的问题是，为什么 Chrome 在使用 Open Sans 时第一次没有加载？

这就是我所看到的。 Open Sans 直接包含在项目中。除了上面问题中的 import 语句，我们有许多 @font-face css 规则，比如这个：

@font-face 
    font-family:'Open Sans';
    font-style:normal;
    fontweight:300;
    src:url('../fonts/OpenSans-Light-webfont.eot');
    src:url('../fonts/OpenSans-Light-webfont.eot?#iefix')
    format('embedded-opentype'), url('../fonts/OpenSans-Light-webfont.woff')
    format('woff'), url('../fonts/OpenSans-Light-webfont.ttf')
    format('truetype'), url('../fonts/OpenSans-Light-webfont.svg#open_sanslight')    
    format('svg')

如果我将这些注释掉，我使用的 <h3> 标记会很好地加载。如果我把它们留在里面，它们不会第一次加载，而是每次都加载。有没有其他人使用 Open Sans 看到过这个问题？你是怎么解决的？

---

原始问题

我对 Google Chrome 和打印的问题感到困惑。首次打开打印时缺少一些特定元素。在第一次之后的每次都加载正常。就像 CSS 规则在打印预览呈现之前还没有完成处理一样。

该页面使用 Bootstrap 3 以及一些自定义样式。相关元素的 html 如下：

<h3 class="myHide">Some text</h3>

屏幕/普通CSS如下：

.myHide display: none !important;

打印CSS如下：

.myHide display: block !important;

很遗憾，我不能分享实际的 CSS 和 HTML，但上面的功能是相同的。我第一次点击打印时，每个带有该类的<h3> 都不会显示，但应该有空白区域。之后每次我点击打印时它都显示正常。我只在 Chrome 中看到这个问题。无论我如何打印，FF 和 IE 每次都能正常工作。

我尝试了一些主要是对 CSS 的小调整的东西。我尝试过的一件事是从自定义类切换到显示/隐藏内容到 Bootstrap 中提供的内容，但观察到了相同的行为。我花了很长时间在谷歌上搜索解决方案，尝试不同的选项，并与其他人讨论这个问题，但还没有找到一个可行的解决方案，这导致我来到这里希望有人看到这个。

注意：我查看了a similar question，但该项目没有像那样导入字体，因此该解决方案将不起作用（除非它是 Open Sans 本身的问题，而不是它如何导入到项目）。

更新：页面确实有一些监听打印事件的函数。具体来说，我将onbeforeprint 和onafterprint 用于FF 和IE，我将matchMedia 用于Chrome。我仍在研究它们，但似乎不合理的是，这些会在第一次而不是后续时间延迟 CSS 样式和 HTML 元素的处理。不过，我会继续调查。

【问题讨论】：

是否有诸如 div 之类的元素包含在您的 h3 中，您也正在隐藏/显示？

看起来可能是渲染问题，浏览器没有及时绘制元素，您是否尝试过添加短暂的延迟？

我只是仔细检查了父 div 的，它们在任何时候都没有显示/隐藏。我会在打印时添加一个短暂的延迟，看看是否有帮助。

我也刚遇到这个问题，使用JS打印似乎有一些问题（但那是3年前，所以它可能不再相关，但也可能是一个选项尝试）-***.com/questions/10401454/…

所以，我尝试添加一个短暂的延迟并认为它有效，但实际上没有（这是我第二次尝试打印）。

【参考方案1】：

最后只是改变了使用的样式。我现在不使用display: none，而是使用以下内容：

.my-hide 
  display: block !important;
  height: 0px;
  overflow: hidden;

@media print 
  .my-hide 
    height: auto;
  

出于某种原因，这些 CSS 规则会得到及时处理，而其他规则则不会。