So erstellen Sie druckerfreundliche Seiten mit CSS

In diesem Artikel überprüfen wir die Kunst, druckerfreundliche Webseiten mit CSS zu erstellen.

Key Takeaways

1. Die Bedeutung von druckerfreundlichen Seiten: Trotz des digitalen Zeitalters besteht ein erheblicher Bedarf an druckerfreundlichen Webseiten. Das Drucken von Webseiten ist für verschiedene Zwecke von wesentlicher Bedeutung, z. B. für das Druck von Reisekarten, das Offline -Lesen und die Bereitstellung von zugänglichen Informationen für diejenigen, die es schwierig finden, Bildschirme zu verwenden. Der Artikel betont die Notwendigkeit, Webseiten für den Druck zu optimieren, um die Zugänglichkeit und die Benutzererfahrung zu verbessern.

2. CSS für Print: CSS spielt eine entscheidende Rolle bei der Drucker von Webseiten druckerfreundlich. Der Artikel beschreibt, wie CSS zum Erstellen von Druckstylesheets verwendet werden, die sicherstellen, dass Webinhalte beim Drucken in einem optimalen Format angezeigt werden. Dies beinhaltet die Verwendung spezifischer Medienabfragen zum Druck, zum Anpassen von Layout und den Stilen und der Sicherstellung, dass die gedruckte Seite lesbar und gut organisiert ist.

3. Praktische Tipps und Techniken: Der Artikel enthält eine Fülle praktischer Ratschläge zum Erstellen effektiver Druckstylesheets. Zu den wichtigsten Empfehlungen gehören das Entfernen unnötiger Elemente, das linearisierende Layouts, die Verwendung geeigneter Schriftarten und Größen, die Verwaltung von Seitenunterbrechungen und die Einbeziehung ergänzender Inhalte für gedruckte Versionen. Diese Tipps helfen Webentwicklern, sicherzustellen, dass ihre Websites einfach und effizient gedruckt werden können, wodurch Tinte und Papier gespeichert werden und gleichzeitig die Integrität des Webinhalts beibehalten werden.

Warum brauchen wir CSS zum Drucken?

"Wer druckt Webseiten?" Ich höre dich weinen! Relativ wenige Seiten werden jemals auf Papier reproduziert. Aber bedenken Sie:

• Druckreisen oder Konzertkarten
• reproduzierende Routenanweisungen oder Zeitpläne
• Speichern einer Kopie für Offline -Lesen
• Zugriff auf Informationen in einem Gebiet mit schlechter Konnektivität
• Daten unter gefährlichen oder schmutzigen Bedingungen verwenden - zum Beispiel eine Küche oder eine Fabrik
• Ausgabe von Entwurfsinhalten für schriftliche Anmerkungen
• Drucken von Webbelegen für Buchhaltungszwecke
• Dokumente an Personen mit Behinderungen zur Verfügung stellen, die es schwierig finden, einen Bildschirm zu verwenden
• Drucken einer Seite für Ihren Kollegen, die sich weigert, diesen neuen T'internet -Unsinn zu verwenden.

Leider können Druckseiten eine frustrierende Erfahrung sein:

• Text kann zu klein, zu groß oder zu schwach
sein
• Spalten können zu eng, zu breit oder überflüssiges Seitenmargen
sein
Abschnitte können beschnitten oder vollständig verschwinden
Tinte wird auf unnötigen farbigen Hintergründen und Bildern verschwendet
Link -URLs können nicht sehen
Symbole, Menüs und Anzeigen werden gedruckt, die niemals geklickt werden können!

Viele Entwickler befürworten Web -Barrierefreiheit, aber nur wenige denken daran, das gedruckte Web zugänglich zu machen!

Es kann eine Herausforderung sein, reaktionsschnelle, kontinuierliche Medien in jede Größe und Orientierung in ein paar Größe und Orientierung umzuwandeln. Die CSS -Printkontrolle ist jedoch seit vielen Jahren möglich, und ein grundlegendes Stilblatt kann innerhalb von Stunden abgeschlossen werden. In den folgenden Abschnitten werden gut unterstützte und praktische Optionen beschrieben, um Ihre Seiten druckerfreundlich zu gestalten.

Druckstilblätter

Druck -CSS kann entweder sein:

1. zusätzlich zum Bildschirmstyling angewendet. Wenn Sie Ihre Bildschirmstile als Basis nehmen, überschreiben die Druckerstile diese Standardeinstellungen bei Bedarf.
2. als separate Stile angewendet. Der Bildschirm und die Druckstile sind völlig getrennt; Beide beginnen mit den Standardstilen des Browsers.

Die Auswahl hängt von Ihrer Website/App ab. Persönlich verwende ich die meiste Zeit Bildschirmstile als Druckbasis. Ich habe jedoch separate Stilblätter für Anwendungen mit radikal unterschiedlichen Ausgängen verwendet-z.

Ein Druckstilblatt kann nach dem Standardstilblatt zu HTML hinzugefügt werden:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Die Styles für print.css werden zusätzlich zu den Bildschirmstilen angewendet, wenn die Seite gedruckt wird.

, um den Bildschirm zu trennen und Medien zu drucken, Main.css sollte nur auf den Bildschirm abzielen:

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Alternativ können Druckstile mit @Media -Regeln in eine vorhandene CSS -Datei aufgenommen werden. Zum Beispiel:

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Eine beliebige Anzahl von @media -Druckregeln kann hinzugefügt werden, sodass dies praktisch ist, um die damit verbundenen Stile zusammenzuhalten. Bildschirm- und Druckregeln können bei Bedarf auch getrennt werden:

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Druckerausgabe

testen

Es ist nicht notwendig, Bäume zu töten und jedes Mal, wenn Sie Ihr Drucklayout testen möchten, unglaublich teure Tinte zu verwenden! Die folgenden Optionen replizieren Druckstile auf dem Bildschirm.

Print Preview

Die zuverlässigste Option ist die Option Print -Vorschau in Ihrem Browser. Dies zeigt, wie Seitenunterbrechungen mit Ihrer Standardpapiergröße behandelt werden.

Alternativ können Sie die Seite möglicherweise speichern oder Vorschau durch den Exportieren in ein PDF.

Entwickler -Tools

Die Devtools (

f12

oder cmd/Strg verschieben i ) können Druckstile emulieren, obwohl Seitenpausen nicht sein werden gezeigt. Öffnen Sie in Chrome die Entwickler-Tools und wählen Sie mehr Tools aus, wobei Sie dann oben rechts über das Menü Drei-Punkte-Symbol rendern. Ändern Sie die Emulations -CSS -Medien, um am unteren Bereich dieses Feldes zu drucken.

Öffnen Sie in Firefox die Entwickler -Tools und klicken

Hacken Sie Ihr Medienattribut

vermutet, dass Sie ein -Tag zum Laden des Druckers CSS verwenden. Sie können das Medienattribut vorübergehend auf Bildschirm ändern:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Auch dies enthüllt keine Seitenpausen. Vergessen Sie nicht, das Attribut für Media = "Print" wiederherzustellen, sobald Sie das Testen beendet haben.

unnötige Abschnitte entfernen

Bevor Sie etwas anderes tun, entfernen und kollabieren Sie redundante Inhalte mit Anzeige: Keine;. Typische unnötige Abschnitte auf Papier können Navigationsmenüs, Heldenbilder, Header, Fußzeilen, Formulare, Seitenleisten, Social -Media -Widgets und Werbeblöcke enthalten (normalerweise alles in einem Iframe):

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Es kann erforderlich sein, Display zu verwenden: Keine! Wichtig; Wenn CSS- oder JavaScript -Funktionalität Elemente nach bestimmten UI -Zuständen zeigt. Verwenden! Wichtig ist normalerweise nicht empfohlen, aber wir können die Verwendung in einem grundlegenden Satz von Druckerstilen rechtfertigen, die die Bildschirm -Standardeinstellungen überschreiben.

linearisieren Sie das Layout

Es schmerzt mich, das zu sagen, aber Flexbox und Raster spielen selten gut mit Druckerlayouts in jedem Browser. Wenn Sie auf Probleme stoßen, sollten Sie die Anzeige: Block verwenden. oder ähnlich auf Layoutboxen und passen Sie die Abmessungen nach Bedarf an. Beispielsweise setzen Sie Breite: 100%; um die volle Seitenbreite zu überspannen.

Drucker -Styling

druckerfreundliches Styling kann jetzt angewendet werden. Empfehlungen:

• Stellen Sie sicher, dass Sie dunklen Text auf einem weißen Hintergrund verwenden
• Überlegen Sie, ob Sie eine Serifenschrift verwenden können, die möglicherweise einfacher zu lesen ist
• Passen Sie die Textgröße auf 12pt oder höher an
an
Bei Bedarf Paddings und Ränder ändern. Standard -CM, MM oder in Einheiten kann praktischer sein.

Weitere Vorschläge sind…

adoptieren Sie CSS -Spalten

Standard A4 und US -Buchstabenpapier können zu längeren und weniger lesbaren Textzeilen führen. Erwägen Sie, CSS -Spalten in Drucklayouts zu verwenden. Zum Beispiel:

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

In diesem Beispiel werden Spalten erstellt, wenn mindestens 37Em horizontaler Raum vorhanden sind. Es müssen keine Medienfragen festgelegt werden. Weitere Spalten werden auf breiterem Papier hinzugefügt.

Verwenden Sie Grenzen anstelle von Hintergrundfarben

Ihre Vorlage kann Abschnitte oder Call-out-Kästchen haben, die mit dunkleren oder inversen Farbschemata bezeichnet werden:

Tinte speichern, indem Sie diese Elemente mit einem Grenze darstellen:

Bilder entfernen oder invertieren

Benutzer möchten nicht dekorative und nicht wesentliche Bilder und Hintergründe drucken. Sie können einen Standard in Betracht ziehen, bei dem alle Bilder verborgen sind, es sei denn, sie haben eine Druckklasse:

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Im Idealfall sollten gedruckte Bilder dunkle Farben auf leichtem Hintergrund verwenden. Es kann möglich sein, in CSS eingebettete SVG-Farben von HTML zu ändern, aber es wird Situationen geben, in denen Sie dunklere Bitmaps haben:

Ein CSS -Filter kann verwendet werden, um die Farben im Druckstilblatt umzukehren und anzupassen. Zum Beispiel:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span>

Das Ergebnis:

Zusätzliche Inhalt hinzufügen

gedruckte Medien benötigen häufig zusätzliche Informationen, die auf dem Bildschirm nicht erforderlich wären. Die CSS-Inhaltseigenschaft kann verwendet werden, um Text an :: vor und :: nach Pseudo-Elementen anzuhängen. Zeigen Sie beispielsweise die URL eines Links in Klammern nach dem Text an:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Oder Sie können nur Drucknachrichten hinzufügen:

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Für komplexere Situationen sollten Sie eine Klasse wie Druck auf Elemente verwenden, die nur beim Drucken sichtbar sein sollten. Zum Beispiel:

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Die CSS:

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

Hinweis: Die meisten Browser zeigen die URL und das aktuelle Datum/die aktuelle Zeit auf dem Kopf- und/oder Fußzeilen der gedruckten Seite an. Daher müssen diese Informationen selten in Code generiert werden.

Seite bricht

Mit den CSS3-Eigenschaften können Sie vor und nach einem Element steuern, wie sich Seite, Spalte oder Region bricht. Die Unterstützung ist ausgezeichnet, aber ältere Browser verwenden möglicherweise die ähnlichen Seitungsanlagen vor Ort und Break-After-Eigenschaften.

Die folgenden Bruch- und Break-After-Werte können verwendet werden:

• Auto: Der Standard - eine Pause ist erlaubt, aber nicht erzwungen
• vermeiden: Vermeiden Sie einen Unterbrechung auf der Seite, der Spalte oder Region
• vermeiden Sie Seite: Vermeiden Sie einen Seitenunterbrecher
• Seite: Erzwingen Sie einen Seitenunterbrecher
• Immer: Ein Alias ​​von Seite
• links: Kraftpage bricht, also ist das nächste eine linke Seite
• rechts: Die Seitenpage bricht, also ist die nächste eine rechte Seite

Beispiel: Erzwingen Sie unmittelbar vor einer Überschrift

eine Seitenpause:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span>

Hinweis: Seien Sie vorsichtig mit übergängigen Seitenunterbrechungen. Im Idealfall sollte die Druckerausgabe so wenige Seiten wie möglich verwenden.

Die Eigenschaft Break-Inside (und ältere Seitenausbruch) gibt an, ob in einem Element ein Seitenunterbrechung zulässig ist. Die häufig unterstützten Werte:

• Auto: Der Standard - eine Pause ist erlaubt, aber nicht erzwungen
• vermeiden: Vermeiden Sie eine innere Pause, wenn möglich
vermeiden Sie Seite: Vermeiden Sie einen inneren Seitenpause, wenn möglich

<span>/* print.css */
</span><span>header<span>, footer, aside, nav, form, iframe, .menu, .hero, .adslot</span> {
</span>  <span>display: none;
</span><span>}
</span>

Dies kann vorzuziehen sein, um Seitenunterbrechungen anzugeben, da Sie so wenig Papier wie möglich verwenden können, während Sie Seitenunterbrechungen in gruppierten Daten wie Tabellen oder Bildern vermeiden:

Die Witweneigenschaft gibt die minimale Anzahl von Zeilen in einem Block an, der oben auf einer Seite angezeigt werden muss. Stellen Sie sich einen Block mit fünf Textzeilen vor. Der Browser möchte nach Zeile vier einen Seitenunterbrecher machen, sodass die letzte Zeile oben auf der nächsten Seite angezeigt wird. Witwen einstellen: 3; bricht auf oder vor Zeile zwei, damit mindestens drei Zeilen auf die nächste Seite übertragen werden.

Die Waiseneigenschaft ähnelt Witwen, außer dass sie die minimale Anzahl von Zeilen am unteren Rand einer Seite steuert.

Die Eigenschaft der Box-Decoration-Break steuert die Elementgrenzen über Seiten hinweg. Wenn ein Element mit einem Rand einen inneren Seitenunterbrecher hat:

• Slice: Die Standardeinstellung spaltet das Layout. Der obere Rand wird auf der ersten Seite angezeigt und der untere Rand wird auf der zweiten Seite angezeigt.
• Klon: Replikiert Rand, Polsterung und Grenze. Alle vier Grenzen werden auf beiden Seiten angezeigt.

Schließlich verfügt CSS PAGED MEDIA (@PAGE) über einen begrenzten Browserunterstützung, bietet jedoch eine Möglichkeit, bestimmte Seiten zu zielen, sodass alternative Margen oder Pausen definiert werden können:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

Die Eigenschaften der CSS -Seite Break können in Ihrem Bildschirm oder in den Druckstilen platziert werden, da sie sich nur auf den Druck auswirken. Ich empfehle jedoch, sie in gedruckter CSS für Klarheit zu verwenden.

Beachten Sie, dass die Seite "Seitenunterbrechung kontrolliert" nur ein Vorschlag für den Browser ist. Es gibt keine Garantie, dass eine Pause erzwungen oder vermieden wird, da das Layout auf die Grenzen des Papiers beschränkt ist.

Druckschmerzen

Kontrolle über das Druck von Webmedien wird immer begrenzt sein, und die Ergebnisse können zwischen den Browsern variieren. Das heißt:

• druckerfreundliche Style-Blätter können auf jede Website eingerichtet werden
• Das meiste Drucker -Styling funktioniert in den meisten Browsern
• Druckstile wirken sich nicht auf die vorhandene Funktionalität aus oder brechen
• Die Entwicklungskosten sind minimal.

Hinzufügen einiger Seitenunterbrechungen und das Entfernen unnötiger Abschnitte begeistern die Benutzer und erhöhen Ihre Website über den Wettbewerbern. Fügen Sie es Ihrer To-Do-Liste hinzu!

Lesen Sie unser Buch CSS Master, 3. Auflage .

FAQs über das Erstellen von druckerfreundlichen Seiten mit CSS

Erstellen eines CSS -Print -Stylesheets ist wichtig, um das Erscheinungsbild von Webseiten zu steuern, wenn sie gedruckt werden. Lassen Sie uns enden, indem wir einige der häufig gestellten Fragen zum Erstellen von druckerfreundlichen Seiten mit CSS abdecken.

Was ist CSS für Druck?

Es ist möglich, Webseiten direkt aus Ihrem Browser zu drucken, aber eine gedruckte Webseite sieht häufig nicht wie die Seite, die Sie auf dem Bildschirm sehen, nicht aus. Webseiten werden mit CSS gestaltet, und CSS kann auch verwendet werden, um das Styling für die gedruckte Seite bereitzustellen. Webseitenstile übersetzen jedoch normalerweise nicht gut zum Drucken. Daher ist es wichtig, CSS -Stile speziell für die gedruckte Seite zu schreiben. CSS für Druck ist eine Reihe von Stilen, die speziell entwickelt wurden, um Druckern das Layout der gedruckten Seite zu formatieren.

Wie kann ich CSS für den Druck verwenden?

Webseite CSS gilt automatisch für die gedruckte Version einer Webseite, jedoch häufig mit unerwarteten oder unerwünschten Ergebnissen. CSS for Print erkennt die einzigartigen Einschränkungen der gedruckten Seite im Gegensatz zur flexibleren Browserumgebung. Das Festlegen von Styles für den Druck beinhaltet das Nachdenken darüber, wie Elemente am besten auf einer gedruckten Seite angezeigt werden. Dies kann das Versteck von Elementen umfassen, die für den Druck nicht relevant sind, wie z. Version der Webseite.

Wie richte ich ein CSS -Print -Stylesheet ein?

Es gibt zwei grundlegende Möglichkeiten, Druckstile in CSS zu servieren: über ein separates Stylesheet oder über eine Medienabfrage. CSS -Druckstile können in einem separaten Stylesheet gespeichert werden, das mit einer Webseite im Abschnitt

im Dokument verknüpft ist:



CSS -Druckstile können in einem Stylesheet zusammen mit Stilen für andere Medien über Medienfragen platziert werden:

@media print {
/ * Druckenstile hier * / / / / / / /
}

Was sind einige übliche Anwendungsfälle für Druckstilsheets?

Gemeinsame Anwendungsfälle für Druckstylesheets gehören:
- Anpassung der Schriftgrößen und -stile für die Lesbarkeit auf Papier. - Stellen Sie sicher, dass Bilder und Hintergrundfarben standardmäßig nicht drucken.
Wie kann ich bestimmte Elemente in der Druckversion verbergen?

Sie können bestimmte Elemente in der Druckversion mit CSS ausblenden, indem Sie die Anzeigeeigenschaft auf keine festlegen. > Anzeige: Keine;

}

}

Wie spreche ich Seitenbrüche in einem Druckstilsheet an?

Sie können Seitenunterbrechungen angeben, indem Sie die Seitungs-Break-vorne- und Seitenausbruch-CSS-Eigenschaften verwenden. Zum Beispiel:

@media print {
.PAGE-BREAK {
PAGE-BREAK-BEFORE: Immer;
}

}

Kann ich die Seitenränder für gedruckte Dokumente ändern?

Ja, Sie können die Seitenränder für gedruckte Dokumente mithilfe der @Page -Regel in Ihrem Druckstylesheet ändern. Zum Beispiel:

@page {
Margin: 1cm;
}

Wie kann ich sicherstellen, dass Bilder und Hintergrundfarben nicht drucken?

Sie können verhindern, dass Bilder und Hintergrundfarben drucken, indem Sie CSS-Eigenschaften wie Hintergrundbild und Hintergrundfarbe verwenden, wobei der Niemand in Ihrem Druckstylesheet ist. Zum Beispiel:

@media print {
img {
Anzeige: Keine;
}

Body {

Hintergrundfarbe: White;

}
}

Ist es möglich, die Schriftstile und Größen für das Drucken zu ändern?

Ja, Sie können Schriftstile und -größen für das Drucken ändern, indem Sie verschiedene Stile in Ihrem Druckstylesheet angeben. Zum Beispiel:

@media print {
Körper {
Schriftgröße: 12pt;
Schriftfamilie: Arial, sans-serif;

}

}

Wie teste ich mein Druckstilsheet vor dem Drucken?

Sie können Ihr Druckstylesheet mithilfe der Druckvorschau -Funktion Ihres Webbrowsers testen. Mit den meisten modernen Browsern können Sie sehen, wie die Seite aussehen wird, wenn Sie gedruckt werden, ohne sie tatsächlich zu drucken.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie druckerfreundliche Seiten mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!