Neue Einstellungen für Text und Schriftarten in CSS3
|
Textschatten Textschatten: horizontaler Versatz, vertikaler Versatz, Unschärfefarbe Kompatibilität: IE10+
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
P{
Farbe: blau;
Textschatten: 3px 3px 3px schwarz;
}
</Stil>
</Kopf>
<Text>
<p>Dies ist ein Testtext</p>
</body>
</html>
CSS3-Zeilenumbruch Wörtertrennung: normal | alles umbrechen | alles behalten Für englischen Text: „normal“ und „keep-all“ haben dieselbe Wirkung; „break-all“ bedeutet, dass Buchstaben in Zeilen umgebrochen werden, ohne die Wirkung von Wörtern zu berücksichtigen. Für chinesischen Text: Normal und Break-All haben die gleiche Wirkung; Keep-All bedeutet Umbruch gemäß Satzzeichen
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
p{width:500px;}
span{Hintergrund:#abcdef;}
p:n-tes Kind(1){Worttrennung:normal;}
p:nth-child(2){Wortumbruch:alles umbrechen;}
p:nth-child(3){Worttrennung:alles behalten;}
p:n-tes Kind(5){Wortumbruch:normal;}
p:nth-child(6){Wortumbruch:alles umbrechen;}
p:nth-child(7){Worttrennung:alles behalten;}
</Stil>
</Kopf>
<Text>
<p><span>[word-break:normal]</span> Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</p>
<p><span>[word-break:break-all]</span> Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</p>
<p><span>[word-break:keep-all]</span> Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</p>
<hr>
<p><span>[word-break:normal]</span> Ich habe einen Traum, dass diese Nation eines Tages aufsteht und die wahre Bedeutung ihres Glaubensbekenntnisses auslebt: „Wir halten diese Wahrheiten für selbstverständlich, dass alle Menschen gleich geschaffen sind.“ Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Erben ehemaliger Sklaven und die Erben ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können. </p>
<p><span>[word-break:break-all]</span> Ich habe einen Traum, dass diese Nation eines Tages aufsteht und die wahre Bedeutung ihres Glaubensbekenntnisses auslebt: „Wir halten diese Wahrheiten für selbstverständlich, dass alle Menschen gleich geschaffen sind.“ Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Erben ehemaliger Sklaven und die Erben ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können. .</p>
<p><span>[word-break:keep-all]</span> Ich habe einen Traum, dass diese Nation eines Tages aufsteht und die wahre Bedeutung ihres Glaubensbekenntnisses auslebt: „Wir halten diese Wahrheiten für selbstverständlich, dass alle Menschen gleich geschaffen sind.“ Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Erben ehemaliger Sklaven und die Erben ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können. </p>
</body>
</html>
Zeilenumbruch für aufeinanderfolgende lange englische Wörter oder URLs (gilt nicht für Chinesisch) Zeilenumbruch: normal | Wortumbruch;
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
p{width:200px;}
span{Hintergrund:#abcdef;}
p:n-tes Kind(1){Zeilenumbruch:normal;}
p:nth-child(2){Zeilenumbruch:Worttrennung;}
</Stil>
</Kopf>
<Text>
<p><span>[Zeilenumbruch:normal]</span> <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p><span>[Zeilenumbruch:Wortumbruch]</span> <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
text-align-last So richten Sie die letzte Textzeile aus Nur IE unterstützt es, Firefox muss das Präfix -moz- hinzufügen, Google 50+ unterstützt es
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
p{width:800px;}
span{Hintergrund:#abcdef;}
p:n-tes-Kind(1){text-align-last:auto;}
p:n-tes-Kind(2){text-align-last:left;}
p:n-tes-Kind(3){text-align-last:right;}
p:n-tes-Kind(4){text-align-last:center;}
p:nth-child(5){text-align-last:justify;}
p:n-tes Kind(6){text-align-last:start;}
p:n-tes-Kind(7){text-align-last:right;}
p:n-tes Kind(8){text-align-last:initial;}
p:nth-child(9){text-align-last:inherit;}
</Stil>
</Kopf>
<Text>
<p><span>auto</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>left</span>HTML steht für Hypertext Markup Language und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>richtig</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>center</span>HTML steht für Hypertext Markup Language und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>justify</span>HTML wird Hypertext Markup Language genannt und ist eine Markierungssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>start</span>HTML steht für Hypertext Markup Language und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>Ende</span>HTML heißt Hypertext Markup Language und ist eine Markierungssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>ursprünglich</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>erben</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
</body>
</html>
text-align-last ist nur gültig, wenn text-align:justify Textüberlauf Bei der Verwendung müssen Sie das Element auf overflow:hidden; setzen. Ungültig für Chinesisch, ungültig für kurze englische Wörter, nur gültig für lange englische Wörter
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
div{width:800px;overflow:hidden;}
span{Hintergrund:#abcdef;}
div:nth-child(1){text-overflow:clip;}
div:nth-child(2){text-overflow:ellipsis;}
div:nth-child(3){text-overflow:">>";}
div:nth-child(4){text-overflow:clip;}
div:nth-child(5){text-overflow:ellipsis;}
div:nth-child(6){text-overflow:">>";}
div:nth-child(7){text-overflow:clip;}
div:nth-child(8){text-overflow:ellipsis;}
div:nth-child(9){text-overflow:">>";}
</Stil>
</Kopf>
<Text>
<div><span>clip</span>HTML heißt Hypertext Markup Language und ist eine Markierungssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </div>
<div><span>Auslassungspunkte</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </div>
<div><span>string</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </div>
<div><span>Clip</span>Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</div>
<div><span>Auslassungspunkte</span>Ich habe einen Traum, dass eines Tages auf den roten Hügeln Georgias die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</div>
<div><span>string</span>Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</div>
<div><span>Clip</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div><span>Auslassungspunkte</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div><span>Zeichenfolge</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
Textüberlauf:Clip; ausblenden Textüberlauf: Auslassungspunkte; Auslassungspunkte text-overflow: Zeichenfolge; gibt Zeichen an, nur in Firefox gültig
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
div{width:800px;overflow:hidden;}
span{Hintergrund:#abcdef;}
div:nth-child(1){text-overflow:clip;}
div:nth-child(2){text-overflow:ellipsis;}
div:nth-child(3){text-overflow:">>";}
div:nth-child(4){text-overflow:clip;}
div:nth-child(5){text-overflow:ellipsis;}
div:nth-child(6){text-overflow:">>";}
div:nth-child(7){text-overflow:clip;}
div:nth-child(8){text-overflow:ellipsis;}
div:nth-child(9){text-overflow:">>";}
</Stil>
</Kopf>
<Text>
<div><span>Clip</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div><span>Auslassungspunkte</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div><span>Zeichenfolge</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
Überlauf: sichtbar | versteckt | scrollen | automatisch | übernehmen Versteckten Text beim Mouseover anzeigen
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
div{width:800px;overflow:hidden;text-overflow:ellipsis;}
div:hover{Überlauf:sichtbar;}
</Stil>
</Kopf>
<Text>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
@font-face-Kompatibilität IE9+ Schriftformat TrueType .ttf keine Optimierungskompatibilität IE9+ OpenType .otf ist eine aktualisierte Version von ttf und nicht mit IE kompatibel Das beste Schriftformat für die .woff-Webversion ist das komprimierte Format TrueType/OpenType, das mit IE9+ kompatibel ist, aber nicht mit Mobiltelefonen! .eot IE-spezifisches Schriftformat Das SVG-Schriftformat ist nicht mit IE und Firefox kompatibel. Benutzerdefinierte Schriftart, generische Vorlage
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
@Schriftart{
Schriftfamilie: „meineSchriftart“;
src:url('font/myFont.eot'),/*Kompatibel mit IE9+*/
url('font/myFont.eot?#iefix') format('embedded-opentype'),/*Kompatibel mit IE6-8*/
url('font/myFont.ttf') format('truetype'),/*kompatibel mit Mobiltelefonen*/
url('font/myFont.woff') format('woff'),/*kompatibel mit allen Browsern*/
url('font/myFont.svg#myFont') format('svg');/*Für iOS entwickelt*/
}
p{font-family: 'myFont';} </style> </head> <body> <p>Dies ist meine benutzerdefinierte Schriftart~</p> </body></html>Website zum Bezug spezieller Schriftarten: https://www.fontsquirrel.com/tools/webfont-generator
Da es sich um einen ausländischen Server handelt, ist die Downloadgeschwindigkeit relativ langsam Hinweis: Ich habe persönlich festgestellt, dass die von dieser Software konvertierten Schriftformate nur die englische Version unterstützen Es wird empfohlen, andere inländische Online-Konvertierungstools oder Websites zu verwenden Schriftartdateien
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
@Schriftart {
Schriftfamilie: „Yang Rendong Bamboo and Stone“;
src:url('myfont/Dateityp "myfont".eot'),/*Kompatibel mit IE9+*/
url('myfont/Dateiname des Quelltexts.eot?#iefix') format('embedded-opentype'),/*Kompatibel mit IE6-8*/
url('myfont/杨任东竹石体.ttf') format('truetype'),/*kompatibel mit Mobiltelefonen*/
url('myfont/Dateiname des Schriftartes.woff') format('woff'),/*Mit allen Browsern kompatibel*/
url('myfont/杨任东竹石体.svg#杨任东竹石体') format('svg');/*Für iOS entwickelt*/
}
p{font-family: 'Yang Rendong Bambus und Stein';font-size:24px;}
</Stil>
</Kopf>
<Text>
<p>HALLO, DAS IST MEINE SCHRIFTART~Dies ist meine benutzerdefinierte Schriftart~</p>
</body>
</html>
Erfolg~~~ Zusammenfassen Oben habe ich Ihnen die neuen Text- und Schrifteinstellungen in CSS3 vorgestellt. Ich hoffe, es wird Ihnen helfen! |
>>: Detaillierte Erklärung des Unterschieds zwischen Tags und Elementen in HTML
Artikel empfehlen
Grundlegende Operationen von MySQL-Datentabellen: Operationen in der Tabellenstruktur, Beispielanalyse von Feldoperationen
Dieser Artikel beschreibt anhand von Beispielen d...
Native JS-Drag-and-Drop-Funktion zum Erstellen eines Slider-Beispielcodes
Drag & Drop ist eine gängige Funktion im Fron...
Detaillierte Erläuterung der default_server-Definition und der entsprechenden Regeln von nginx
Die default_server-Direktive von nginx kann einen...
MySQL Server 8.0.13.0 Installations-Tutorial mit Bildern und Text
Installieren Sie 8.0.13 basierend auf MySQL 6.1.3...
Der Unterschied und die Verwendung von json.stringify() und json.parse()
1. Unterschiede zwischen JSON.stringify() und JSO...
Über die praktische Anwendung von HTML-Mailto (E-Mail) sprechen
Wie wir alle wissen, ist „mailto“ ein sehr praktis...
Einige Tipps zum Schreiben leistungsstarker HTML-Anwendungen
Wie können Sie die Leistung einer Webseite verbes...
18 Sets exquisiter kostenloser Symbolmaterialien im Apple-Stil zum Teilen
Apple-Becher-Symbole und Extras HD StorageBox – Z...
Reines CSS3 zur Erzielung einer Mouseover-Schaltflächenanimation, Teil 2
Haben Sie nach den letzten beiden Kapiteln ein ne...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein,...
Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL
Einzeilige Funktionen vom Datumstyp in MySQL: CUR...
Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx
Inhaltsverzeichnis Bereitstellung mehrerer Anwend...
Ein kurzer Vergleich von Props in React
Inhaltsverzeichnis Props-Vergleich von Klassenkom...
Eine kurze Diskussion über Schreibregeln für Docker Compose
Dieser Artikel stellt nichts im Zusammenhang mit ...
Analyse impliziter Fehler bei der gleichzeitigen Replikation von MySQL 5.7
Vorwort Die meisten unserer MySQL-Onlineumgebunge...