Question

更新问题

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

这就是我所看到的。 Open Sans直接包含在项目中。我们有一些@font-face css规则，而不是上面问题中的import语句，而不是这个：

@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本身存在问题，而不是导入方式的问题）进入项目）。

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

Answer 1

结束只更改使用的样式。我现在使用以下内容而不是display: none使用以下内容：

.my-hide {
  display: block !important;
  height: 0px;
  overflow: hidden;
}
@media print {
  .my-hide {
    height: auto;
  }
}

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

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

1 个答案: