Chrome Print Preview lädt nicht @media nur print font-face

Question

Ich hätte gerne eine andere Schriftart für den Druck als für den Bildschirm. Leider wird Google Chrome Print Preview (funktioniert in anderen Browsern) nicht geladen und zeigt den Text nicht an. Aber wenn Sie es ein zweites Mal versuchen, wird die Schrift-Gesicht geladen und dann wird Google Chrome Print Preview den Text anzeigen!

Hier ist eine Geige, auf der Sie das Problem reproduzieren können. (NB: auf der Fiddle existiert die Schriftart-URL nicht, aber zumindest sollte die Vorschau den Text als 'Serif' anzeigen).

Gibt es eine bessere Lösung als das Vorladen der Druckschrift für alle @media zu erzwingen?

Die Probleme tritt in allen Versionen von Google Chrome < = 53.

ich diesen Code verwendet:

@media only print { 
    @font-face { 
     font-family: "Computer Modern"; 
     src: url('/fonts/cm/cmunrm.otf'); 
     font-weight: normal; 
     font-style: normal; 
    } 

    body { 
     font-family: "Computer Modern", serif; 
    } 
} 

gefunden

https://jsfiddle.net/72bsf1n0/

Answer 1

Genau diese Frage über Google, nachdem wir die gerade erlebt hatte gleiches Problem. Traurig zu sehen, 11 Monate ohne Antwort, so wird dies vielleicht Ihnen und anderen helfen.

Chrome scheint die benutzerdefinierte Schriftart "on-demand" zu laden. Wenn also die Schriftart nicht bereits auf der Seite verwendet wird, wird sie in der ersten "Druckvorschau" noch nicht angezeigt. Wahrscheinlich ein Timing-Problem dort.

Eine Lösung wäre, sicherzustellen, dass Sie auch die Druckschriftart für die normale Version der Seite verwenden.

@font-face { 
    font-family: "Computer Modern"; 
    src: url('/fonts/cm/cmunrm.otf'); 
    font-weight: normal; 
    font-style: normal; 
} 

@media only print { 
    body { 
     font-family: "Computer Modern", serif; 
    } 
} 

.printfont { 
    font-family: "Computer Modern", serif; 
} 

https://jsfiddle.net/72bsf1n0/8/